How do I add an video on the product page?
Setting up a video on your product detail page needs a specific configuration. You can only do this using semantics.
Semantics is standard offered if you have the Enterprise plan. Do you want additional product data on your B2B which also allows you to place video's on your product detail page? Please contact sales first!
Semantics
If you want to place product videos under at the product detail page, this is possible on model level only through semantics. You need to add a column in the semantics.csv and place the unique video id in the column.
This works with YouTube and Vimeo.
Secondly, in the module semantics. Map the field video as a text filter.
Next up we are going to place a new section in the Tab Manager module called video. Showing a video does not work under the main left or left menu as there is no space for it there. By making a new section we are making a separate dropdown on the product detail page.
-
Go to Tab manager > Your video Section > Tab Items > Add a section and select ‘custom’ - and choose addons as select field.
- Here we will paste in the addons field basically the embed code for a Vimeo or YouTube video, but use the {placeholder} to grab the correct Vimeo video ID from semantics so that it shows the correct video on the correct product.
This will look like this:
Code
Below is the codes that you can use:
Youtube
<iframe width="{placeholder_width}"
height="{placeholder_height}"
src="https://www.youtube.com/embed/{placeholder}"
frameborder="0"
allowfullscreen
allow="autoplay; encrypted-media"
/>
Autoplay
If you want to add autoplay, the code needs to be slightly configured differently. Please note that due recent changes, autoplay only works when you also mute the video from the start. You can also loop it.
Youtube
<iframe width="{placeholder_width}"
height="{placeholder_height}"
src="https://www.youtube.com/embed/{placeholder}?autoplay=1&mute=1&loop=1&playlist={placeholder}"
frameborder="0"
allowfullscreen
allow="autoplay; encrypted-media"
/>
Dimensions
Last but not least configure the dimensions on the tab manager itself.
It is recommended to use aspect ratio of the type of video you want to upload. So 16:9(1920:1080) for normal video and 9:16(1080:1920) for shorts / portrait video.