YouTube Embedded Video

Add an embedded YouTube video to your product page, which shows a video demonstrating the item.

Wireframe

YouTube Embedded Video


Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:


Coding Instructions

Step 1: Setup a custom product field

In the control panel, create a new custom product field and enter the following info:

  • Custom Field: Select any option from the dropdown, remembering the tag (eg. [@misc1@]).
  • Field Name: YouTube Video ID
  • Field Type: Short Text
  • Show On Product Display Page: Visible
  • Show On Product Thumbnail: Visible

Step 2: Add the code into the template

Open /httpdocs/assets/themes/[THEME-NAME]/templates/products/template.html and paste the following code into the template where you would like the video to appear. Make sure to replace both [@misc1@] tags with the "Field ID" from step 1.

[%if [@misc1@]%]
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/[@misc1@]"></iframe>
    </div>
[%/if%]

Step 3: Get the YouTube Video ID

A video ID can be found by viewing a video through YouTube and copy the last string in the URL. Eg. The video URL is https://www.youtube.com/watch?v=wBrCy6-AkEg and the video ID is wBrCy6-AkEg.

Step 4: Enter the YouTube ID

Paste the YouTube video ID into the newly created custom product field which can be populated with data manually through the control panel or via the product import wizard.

Was this article useful?

Be notified when this page is updated. Optional.