2.16. Video Teasers

The MageSuite CC components allow displaying both image assets as well as video assets. The video assets can be displayed using 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).

To utilize videos from external providers (YouTube, Vimeo, or Facebook), users must ensure that appropriate consents have been obtained through Content Management Platform.
See developer documentation: https://creativestyle.atlassian.net/wiki/spaces/CSHOP/pages/2073985033
For videos loaded directly from the user’s disk, there are no additional consent requirements.

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:

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.

Add Video tab in Teaser configuration

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 https://creativestyle.atlassian.net/wiki/spaces/MGS/pages/1992556547 section.

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