Ambient videos create engaging, “interactive” layouts¹ 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

<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 preloading², automatic video playback³ and inline playback⁴. 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.

Update (2017/12/06): Safari Tech Preview 43 resolved an issue with “movie-backed” <img> tags, allowing short, looped, muted MP4 files may now be loaded via <img> tags.

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 "$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.