2.16. Video Teasers

Image Teasers also supports video autoplay.

The video will play once the image teaser is visible on the page and pause when the customer scrolls the page and image teaser is no longer visible. The sound is muted and the player GUI is hidden.

The component allows using video assets via

• uploading a .mp4 file to Magento 2 media explorer

• providing a video URL while the video is hosted on YouTube

• providing a video URL while the video is hosted on Vimeo

• providing a video URL while the video is hosted on Facebook

Video autoplay has built-in support for Consent Management (Usercentrics). The consent for one of YouTube Video, Vimeo or Facebook Videos is required in order to load that specific third-party player. Consents can be added or changed by the developer. Videos uploaded to Magento 2 media explorer don't need consent and will always autoplay.

If no Consent Management tool is used or the user didn't accept the consent for a specific video player, the video won't play and the image will be displayed as a fallback. This default behavior can be changed by the developer (meaning all videos will play even if the user didn't accept any consent).

Image is required and the video will fit its width and height. We recommend using the same aspect ratio of the image as the one of added videos.

Video Teasers are supported in the following CC components and places:

• 2.1.5. Hero Carousel

• 2.1.6. Image Teaser (2.0)

• 2.1.12. Products grid

• Magento Products grid (category page)

• 2.1.18. Teaser and text

• 2.1.20. Mosaic

In order to minimize the number of resources downloaded we recommend using one third-party player per page, or even better in the whole shop, for example: using only YouTube videos.

In order to insert a video, first select one of the CC components mentioned above that support the video teaser feature. Scroll down to the “CONTENT” tab. Here you can upload and select either an image or a video asset to be displayed. Click on the “VIDEO” button (see screenshot above).

Here you can either

• enter a video URL from videos hosted on vimeo, Youtube or facebook. If the video URL has the proper format, you will see a checkmark

• upload & select a video asset using the media library by clicking the “UPLOAD” button next to the video URL input

After the video asset is selected, you can use the configuration options from the “CONTENT” and the “STYLE” tabs that are already known from 2.1.6. Image Teaser (2.0) section.

When done with the configuration, click “SAVE” on the top right corner.