Iframe video embeds can be placed in layout containers, marketing modules, carousels, and dialogs.
To make a video embed fluid, place the iframe embed inside a div and class them as follows:
YouTube videos will pause automatically when the carousel moves to the next slide, if configured correctly. Make sure to use the
data-youtube-video-snapper attribute on the
snapper_item wrapper and that the YouTube
src url has both the
Important note: The CSS animations we use on dialogs don’t play nice with YouTube's fullscreen video. The only workaround is to remove animations on dialogs that have videos - just add the
no-anim class to the dialog markup.
href of both the play and pause links should point to the
id of the video.
To embed a video in the PDP carousel, use the following markup for the slide item. It will load and start playing when it is in view. Note that the nav link to the slide has a class of
snapper_navitem-icon and contains a