background video html

▼

Advisory Notice about Background Video

This component is a work in progress, but is not yet WCAG 2.1 compliant and should be used carefully. If another pattern such as banners or inline video can highlight the content just as well, those patterns are preferred over this component.

We recommend the following if you plan on using background video:

  • An overlay class on the wrapping <div> needs to be added to ensure color contrast is maintained. See "Show Pattern Info" for examples.
  • The pause animation button is required
  • A short description of the video must be provided. See "Show pattern info" for examples

Here's the call-out label

Here's the call-out label