Ambient videos create engaging, “interactive” layouts1 by setting a video as the background of a page or a section of a page. While this design technique can evoke a powerful emotional response, special care must be taken to ensure that implementation does not negatively impact user experience.

As a rule, ambient videos (also referred to as “environmental videos” or background videos) should not include audio. Generally, these videos do not require user interaction to begin playback and loop seamlessly. In many ways, ambient videos resemble animated GIFs; cinemagraphs are particularly well suited for ambient videos.

Challenges of ambient video include accessibility, playback compatibility, and performance.

Demo

Ambient Video
<div class="ambient-video">
  <div class="overlay">
    Overlay Content
  </div>
  <video autoplay loop muted playsinline poster="ambient-video.jpg">
    <source src="ambient-video.mp4" type="video/mp4">
  </video>
</div>
// Hide play button from inline autoplay videos on iOS
video[autoplay][playsinline] {
  &::-webkit-media-controls-play-button,
  &::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
  }
}

Accessibility

Ambient videos frequently appear behind text, buttons and other elements. Ensure that all text and calls to action are clearly readable and distinguishable from the background content.

One way to improve contrast between foreground and background elements is to darken the background by applying a filter to the video. This can be done on the video asset directly (which may improve compression levels, making the file smaller and improving performance) or with CSS. It is also possible to add stokes, borders, and shadows to foreground elements to visually separate them from the background.

Increasing the size of foreground elements can also improve accessibility. This may particularly be useful if the background includes rapid motion.

Playback Compatibility

Perhaps the most difficult challenge faced when implementing ambient video is mobile compatibility. Some mobile browsers disable preloading2, automatic video playback3 and inline playback4. However, new changes in iOS 10 have returned “more control over media playback to web developers” for silent <video> elements – ideal for ambient videos.

Until the features mentioned above are more widely supported, developers must circumvent the restrictions placed on mobile devices. Using JavaScript, developers may either seek a video to simulate inline playback, or load each frame onto a canvas.

Another option is to convert the video to an optimized GIF. However, this method results in extremely poor quality “videos” that are very large in file size. For this reason, I strongly recommend against using the GIF format for ambient videos.

Performance

Video assets, particularly assets of sufficient quality to cover the viewport of large desktop browsers, are quite large in terms of file size.

To ensure that site visitors are not waiting for a large asset to download, generate a “poster image” for the video, which will display while the video is loading. For a seamless experience, it is best to use the first frame of the video for the poster image.

It is possible to easily generate a poster image from the first frame of a video using ffmpeg. In its simplest form:

ffmpeg -i "$infile" -vframes 1 -ss 0 -f image2 -o "$outfile"

I’ve written a script that allows your to quickly create poster images with ffmpeg, and will allow you to optionally scale and blur the poster image for additional performance improvements.

This can be used in combination with gifv – another wrapper I’ve written around ffmpeg, designed to generate high quality, low file size, ambient videos – built for the web.

  1. I say “interactive” because ambient videos present the perception of interactivity without actually providing any interactive functionality. ↩︎

  2. In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.

    Safari Device-Specific Considerations Documentation

    ↩︎

  3. To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback

    Safari Audio and Video Tag Basics Documentation

    ↩︎

  4. Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by playing video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Video is not presented within the webpage.

    Safari Device-Specific Considerations Documentation

    ↩︎