Web Pattern Library

Github Repo


Global styles

Global components

Template Structure

Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides


My Account / History

Static pages

JavaScript Helpers

Web Pattern Library:

Video Embeds

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:

Video Embedded in a layout

Video Embedded in a Snapper carousel

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 enablejsapi=1 and origin parameters.

Video Embedded in a dialog

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.

Open Dialog
Open Dialog

External Controls

The href of both the play and pause links should point to the id of the video.

Embedding video in PDP Carousel

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 <i class="icon-video-play-light"</i>

Pause video Play video