Skip to main content

Ambient video

An ambient video is used to add background video content to a page.

Example

Off

Best practices

Use to break up text-heavy pages, to illustrate products for sale, or to improve storytelling on a page. Ambient videos can be a powerful visual tool when used appropriately, but it can also be distracting in the experience if overused or when placed behind important UI elements.

Do

  • Use for impactful storytelling by highlighting key features of a product.
  • Be mindful of the ambient nature of the video. Ideally the video supports and works with the rest of the content on the page rather than distracting the user or interfering with the intended action.
  • Restrict the video duration to 5 seconds or less to comply with accessibility guidelines.

Don’t

  • Do not ignore the guidance at the bottom of the Lifestyle and Product imagery pages
  • Avoid jarring, or unusually startling video clips that can interrupt the flow of the page.
  • Avoid including audio, since the purpose of ambient video is as a visual element only. Be mindful of interference with other video content on the page that potentially might autoplay.

Related

Video

Accessibility

  • Important: For cognitive disabilities, the video must be under 5 seconds, not loop, and not autoplay, unless the ability to set context-set-motion-limited is present (see top example). This will allow users with disabilities to disable motion. If this is present, the video can be greater than 5 seconds in length, loop, and autoplay.

Options

  • Lean ambient video: Add the class f-lean to the outer module wrapper to remove vertical padding above the module when a flush design is required.

Development

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

Code and preview

Default ambient video

<div class="m-ambient-video">
    <video role="img" alt="Ambient video alt text" poster="images/ambient-example-1.png" muted autoplay loop>
        <source src="videos/ambient-example-1.mp4" type="video/mp4">
        <source src="videos/ambient-example-1.webm" type="video/webm">
        <source src="videos/ambient-example-1.ogg" type="video/ogg">
    </video>
</div>

Ambient video with lean option

<div class="m-ambient-video f-lean">
    <video role="img" alt="Lean ambient video alt text" poster="images/ambient-example-1.png" muted autoplay loop>
        <source src="videos/ambient-example-1.mp4" type="video/mp4">
        <source src="videos/ambient-example-1.webm" type="video/webm">
        <source src="videos/ambient-example-1.ogg" type="video/ogg">
    </video>
</div>