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 player GUI is hidden.
In the Admin Panel, it is configure the component 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 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 consent for specific video player, the video won't play and image will be displayed as fallback. This default behaviour can be changed by 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 same aspect ratio of the image as the one of added video.
Video Teasers are supported in following CC components and places:
Magento Products grid (category page)
In order to minimize the amount 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 the 2.1.6. Image Teaser (2.0) section.
When done with the configuration, click “SAVE” on the top right corner.
Add Comment