Create Fullscreen HTML5 Page Background Video

While we can’t yet set a video for the background or background-image CSS properties – they can only take bitmaps, SVG images, colors and gradients as values – it is possible to fake the appearance of a background video by forcing it behind other HTML elements. The challenge is to have the video fill the browser window, making it as responsive as background images.

Considerations and Limitations

Before achieving this, there some factors you should consider:

• Don’t just use this technique because you can: video content must amplify a site’s message, not just be shown because it’s pretty.
• The video will likely be set to autoplay, but it should be muted by default; ideally, it should not include sound at all. (You can easily create an unmute button for the video with JavaScript).
• The video should display a placeholder image, falling back to a static background image for browsers that do not support HTML5. The placeholder image will also be used a background on mobile devices: most phones and tablets do not support autoplay, for obvious reasons.
• Length is important: too short a video can feel repetitive (as most such videos will be set to loop), while too long becomes a narrative unto itself, and therefore deserving to be a separate design element. I’d suggest a run time of approximately 12 – 30 seconds.
• Bandwidth is a big deal. The video needs to be small, and compressed as effectively as possible. At the same time, it needs to scale across different devices and their associated screens. In advanced cases, you might want to consider using JavaScript matchmedia to send different quality versions of the video to different screen sizes. Try to keep the video under 5mb; ideally, under 500k.

With these factors in mind, let’s look at techniques for making the video happen, using a piece shot by Alexander Wagner.

A Pure CSS Approach

Build the HTML5 video as usual:

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="polina.webm" type="video/webm">

<source src="polina.mp4" type="video/mp4">

</video>

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else.

The poster image will be replaced by the first frame of the video once it loads, so it makes sense to derive that image from the same first frame.

To make the video fullscreen:

video#bgvid { 

position: fixed; right: 0; bottom: 0;

min-width: 100%; min-height: 100%;

width: auto; height: auto; z-index: -100;

background: url(polina.jpg) no-repeat;

background-size: cover; 

}

Older browsers will not recognize the video formats, but should still recognize the basic <video> tag (with the exception of IE8, detailed below). For those browsers we create a background-image for the element, using the same placeholder picture.

You’ll note that the <video> element doesn’t quite resize to fullscreen on mobile devices, due to the device’s perceived limits of the video’s aspect ratio. I’m exploring better possibilities for a future article.

JavaScript Alternatives

While I would argue that a HTML5 / CSS solution is better than a framework, there’s at least one JQuery plugin and some fairly well-established JavaScript code that creates the results shown here.

Conclusion

“Background” video can be a very powerful feature on a site, but with great power comes great responsibility: please use such features judiciously.