Until a couple of years ago, page loading speeds were a major limitation in website design. And while it still is a design factor, developers are less concerned about bandwidth and turning more often to media-rich website, where video plays a significant role. Most sites use bitmaps, SVG images, colors and gradients as page backgrounds so using a background video can be a useful and innovative trick.

But there lies the rub because CSS properties do not support videos as backgrounds, it is necessary to use a different approach to achieve this. So how do we make a background video? Although CSS does not support native background videos, it is possible to fake a background video by using some CSS and HTML elements. It is also possible to make them responsive as with background images.

Ensuring compatibility

In order to successfully implement a background video solution, it is important to ensure it will be available in as many platforms/browsers as possible. To be compatible with all modern browsers (including mobile devices), each video should be available in MP4 and WebM container formats. While there are other video formats, most browsers will play either MP4 or WebM, so using these additional formats does not make much of a difference.

MPEG 4 (MP4) is a video container format based on Apple’s older QuickTime container (.mov). Inside the container videos may be encoded using one of many different, with  H.264 being the most commonly used.

The WebM is a web-optimized video format  based on a restricted version of the Matroska container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. There are many options to convert MP4 videos into WebM, both online and installable software.


Faking a Background Video

Embedding a video in HTML5 is much simpler than you think. You just need to create a tag such as the following:

Now, in order to make it look like a background video, more work is required. We need to create a container for both the background video and the actual main content. This way, we can control placement and size of the video in a responsive manner (in this case, a full-page background).

Please, note I’ve added a third element (<div class=”fake-overlay”></div>). This is not really a requirement but it will help us to prevent the user from interacting with the video (pausing it on click,  for instance).

Since we’re making a full-height background, we need to make sure the body covers [at least] the whole viewport height. We can do that making its height equal to 100%. Note that this is not a requirement if you’re applying the background video to a DIV or any other section of a page.

Once we make the body height to cover the entire browser viewport, we make the container we created to be AT LEAST the same height as the body. This way, if the content is higher than the viewport, it will stretch to contain it. We also make its position relative, so all absolutely positioned elements will use this DIV as a reference.

Finally, we add a background image, which we’ll use in mobile devices (which won’t autoplay videos to save mobile data charges) and on devices that do not support HTML5 videos.

Now that we’ve set up the container, we can define how big and where the video background should be. Since a video’s main content is normally at the center, we use a mix of absolute positioning and a position transform to achieve this.

Also, we make the video’s width and height to be at least as large as the container’s. Since the container will hide any “extra” content (absolutely positioned content only), the video will be cut wherever necessary (either at the sides or at the top and bottom).

If we want to prevent the user from interacting (directly) with the video, we can add an overlay above it and make it as large as the video, so any clicks will land on the overlay and not on the video.

Finally, we need to style the page content. In this case, it’s a simple box with some text in it but it can be anything you want. We apply a large z-index to the content in order to make sure it’s displayed above the background video.

Going mobile

As mentioned before, mobile devices will not autoplay videos, so it’s usually better to hide it and use a static image instead (the one we defined for the content-container div). We also hide the overlay since it’s no longer necessary to have it.

So there you have it! You can now use a video as a background element… You can see this in action on CodePen.

Final Thoughts

One important thing to consider is whether you really need background videos to help you convey your message. Don’t just use background videos because you want to show how cool a developer you are. You should only use this trick if it provides an enhancement to your page’s message.

In most cases, the video should not include sound at all since it will distract the user from the actual content. If the video sound adds extra information, you may want to provide an unmute button and use JavaScript to enable it. The same goes for control buttons. Users should have easy access to UI controls to pause/restart the video.

Video length should be taken into account. Runtime of approximately 12 – 30 seconds is usually desirable. Ideally, the video should play through only once. Repeating the video may distract the user away from the main page content.

Also, bandwidth and load time are a big deal. The video needs to be as small and as compressed as effectively possible (without falling into pixelated frames). Since we’re using it in different devices, video content should be designed to ensure the important parts are always visible (placing them at the center, in a 4:3 box usually gets it right).

In advanced cases, you might want to consider using inline media queries or matchmedia to send different quality versions of the video to different screen sizes. Try to keep the video as small as possible so the page loads fast and doesn’t keep the user waiting.

Summary
Using a Responsive Background Video
Article Name
Using a Responsive Background Video
Description
Most sites use bitmaps, SVG images, colors and gradients as page backgrounds so using a background video can be a useful and innovative trick.
Author
Publisher Name
imelgrat.me
Publisher Logo