Skip to main content

Video trigger

Video trigger is used to wrap video contents with a heading and optional intro text to entice and engage users.

Best practices

Use video trigger to provide users with a brief summary of the video contents. It also serves as the gateway where users can choose to engage with the video contents by clicking on the play button.

Do

  • Try and stick to the recommended aspect ratio of 16:9 for the original media. This will optimize video trigger to resize across different viewports flawlessly and play well with other elements on the page.
  • Keep the video heading and description succinct. The idea is to provide users with a quick overview based on which they can choose to further engage with the video contents.
  • Use images of sufficient resolution to ensure that the video trigger remains crisp even at larger screen sizes.

Don’t

  • Do not use video trigger for purposes that don't result in video playback. Video trigger and the circular play button carry a very specific affordance in the user's mind that should not be compromised.
  • Avoid using a screenshot from the video as the cover image unless its quality is full HD or higher.
  • Do not use images that contain letterboxing or other video artefacts of any kind.

Also known as

Video
Media player
Movie player
Audio player

Related

Action trigger
Call to action
Video (Deprecated)

Options

  • Video trigger with anchor: Use video trigger with an anchor when navigating the user to another page
  • Video trigger with button: Use video trigger with a button when performing on page actions or when triggering a dialog to show the video
  • Trigger a dialog: you can trigger a dialog off the video trigger by adding a data attribute of data-js-dialog-show. More details on implementing a dialog can be found on the Dialog page.

Development

  • Schema definition: The video-trigger schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default video trigger (anchor)

Placeholder with grey background and dimension watermark without any imagery

The new Surface Pro 4: Faster than fast

To do great things, sometimes you have to break the rules. That’s why we reinvented Surface Pro so you can reinvent everything else. Surface Pro 4. The tablet that can replace your laptop.

<div class="m-video-trigger f-mask-40 theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2048x1152/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x1000/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x787/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x787/" src="http://placehold.it/1399x787/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">The new Surface Pro 4: Faster than fast</h1>
        <p class="c-paragraph">To do great things, sometimes you have to break the rules. That’s why we reinvented Surface Pro so you can reinvent everything else. Surface Pro 4. The tablet that can replace your laptop.</p>
        <a class="c-glyph glyph-play" href="#" aria-label="Play Surface video"></a>
    </div>
</div>

Video trigger (button)

Placeholder with grey background and dimension watermark without any imagery

The new Surface Pro 4: Faster than fast

To do great things, sometimes you have to break the rules. That’s why we reinvented Surface Pro so you can reinvent everything else. Surface Pro 4. The tablet that can replace your laptop.

<div id="defaultButtonTrigger" class="m-video-trigger f-mask-40 theme-dark">
    <picture class="c-image">
        <source srcset="http://placehold.it/2048x1152/2F2F2F/F2F2F2" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x1000/2F2F2F/F2F2F2" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x787/2F2F2F/F2F2F2" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/F2F2F2" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/F2F2F2" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/F2F2F2" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x787/2F2F2F/F2F2F2" src="http://placehold.it/1399x787/2F2F2F/F2F2F2" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">The new Surface Pro 4: Faster than fast</h1>
        <p class="c-paragraph">To do great things, sometimes you have to break the rules. That’s why we reinvented Surface Pro so you can reinvent everything else. Surface Pro 4. The tablet that can replace your laptop.</p>
        <button class="c-glyph glyph-play" aria-label="Play Surface video"></button>
    </div>
</div>