10 Guidelines for Better Website Background Videos

In the last few years, we've started to see more and more websites using background videos as a design feature. This trend will only increase as internet connections get faster, video codecs get better, and browsers gain better support for HTML5 video.

If done poorly, a background video can have negative consequences such as slowing down the rest of the page, distracting the user from the actual page content, even making your users feel sick or uneasy if there's too much panning or movement.

However, when done well, though, a background video can be a great, subtle design touch that adds that extra layer of thoughtfulness.

So how do we avoid the mistakes, and do all the right things? Easy, just follow these 10 guidelines.

Compress the video as much as you can

There's nothing worse than visiting a website and having the background video stopping and starting as it tries to buffer all the way through. It's distracting and gives the feeling that the whole website is loading slowly, even if the rest has already loaded.

To avoid this, we really need to compress the video down to the lowest bitrate that we think looks acceptable. It's tempting to use a high quality, 1080p video that looks perfectly crisp and sexy, but it's just not worth the trade-off for loading time and interrupted streaming.

You really should be using 720p video with a low frame rate of 24 or 25 frames per second, and test a few different bitrates between 750k and 1250k, before choosing the lowest one that you think is acceptable. There are also some hacks that can help hide the poor quality, which we'll touch on soon.

Consider using an overlay to hide artefacts

If you're not happy with the quality of your video, or if you're happy with the quality but it's too high-quality to stream smoothly, you should consider adding an overlay on top of your video, which can help to disguise the quality. This is easily done by adding an absolutely positioned div directly after your video, or even using the ::after pseudo-element of the video's container.

You should use the CSS property pointer-events: none; on this element to ensure it doesn't stop people from being able to right-click on the video to pause, play, etc.

A solid color, semi-transparent overlay will help a bit, and can look really nice, especially if you tweak the overlay color to suit the colors in the rest of your design. A patterned overlay will do an even better job of disguising the quality, but may not suit some designs.

To see the effects of an overlay in action, check out this demo of pattern-overlays on a poor-quality video.

Limit the total size and length of your video

A low bitrate helps to ensure our video plays through smoothly without pausing to buffer, but we also need to remember that our users didn't come to our website to watch our background video, and we shouldn't assume they're happy to download a full 2 minutes of video, which could be up to 20MB of video that they didn't ask for.

You should always limit the length of your video to 30-40 seconds at the most, or even better, find a short video that loops seamlessly, so that it seems like a longer video, but could be less than 1MB or 2MB in size, depending on the length. Shameless plug: you can find some really nice looping videos at BG Stock, a stock video website that I've started specifically for website background videos.

Avoid excessive movement

The key word in 'background video' is 'background'. By it's very definition, the video is supplementary to the website's content, and we need to ensure that it doesn't steal the focus. Background videos should be subtle and smooth to avoid distracting our users from what they should really be doing on our website. That means we should avoid things like fast or excessive panning, shaky/unstabilized footage, and quick cuts.

Ensure sufficient contrast with foreground text

If there's text positioned over your video, it's important to make sure it's readable. If the text color clashes with the video, you might need to add an overlay to help distinguish the text, change the text color, or give the text a text-shadow or a background.

It also helps to ensure there are no drastic color contrasts in your video. For example, it would be very difficult to position legible text in front of the video frame below, because it's got both dark and light spots, and our text color would likely clash with one or the other.

Ensure the video stretches to fill its container

CSS3 has a great property that's fairly widely known now called 'background-size', and one of the options is 'cover'. This property ensures that a background image will always be exactly as big as it needs to be to cover the whole element, and no bigger or smaller while maintaining it's original aspect ratio.

There's a lesser-known property called 'object-fit' that does the same thing for actual DOM elements, which would be a great way to ensure our video always covers its container. Unfortunately, browser support for 'object-fit' isn't as good as it needs to be yet, so we either need to use a polyfill, or write some JavaScript to mimic its behavior.

Fortunately, there's a simple jQuery plugin called jQuery Background Video that can take care of this hassle for us, as well as a few other things that we're about to touch on. Disclaimer: I wrote this plugin.

Account for devices

At this point in time, background video support on mobile devices is not great. iOS refuses to auto-play videos, and will instead add a large play icon over the top of the video, which will open the media player when tapped.

If we were embedding a normal video on our page content this would be fine, but because it's just an added design touch, and doesn't contain any critical information, we'd prefer to just fall-back to an image background. Android devices generally don't play nicely either, so in both cases we're better off just disabling the video and falling back to a background-image.

How you do this is up to you, you could hide the video on small screens in a CSS media query, or use JavaScript to check the user-agent and remove the video entirely on iOS/Android devices. jQuery Background Video does the latter by default.

Don't loop forever

If you add the 'loop' attribute to your video tag, your browser will continue looping the video until you close the tab. This affects your users' CPU usage, and can slow down the rest of your page.

You can remove the loop attribute altogether and just play the video through once, but in a lot of cases if we've got a short, looping video, that's not what we want. It's pretty simple to write some JavaScript that pauses the video after X seconds, we just need to make sure we reset the timer if the video is ever paused and played manually (which can be done by right-clicking on the video in most browsers).

As with our other JavaScript enhancements, jQuery Background Video has us covered, allowing us to set a 'pause after' time in seconds.

Offer a pause button

No matter how great and subtle you think your background video is, there will be people who'd rather pause it. Whether it be because it's distracting them, they feel it's slowing down their computer, or they don't expect it to pause by itself.

We can easily add a pause/play button with a bit of custom JavaScript, but again jQuery Background Video has our back. It will add the pause/play button by default, and you can position and style it as you wish.

Consider fading in on play

Remember, our background video should be subtle, and not distracting. A sudden movement when it starts playing can distract the user, so in many cases it's a good idea to slowly fade in the <video> element as it starts playing.

We can do this by adding the poster image as the background of the <video>'s containing element, setting the video's opacity to zero by default, adding a CSS transition on the opacity property, and setting the opacity back to 1 when the video starts playing. jQuery Background Video can take care of this for you if you'd rather not craft your own implementation.

It might also be a good idea to fade out when the video is paused, especially if our poster image is of a higher quality than the video.

In Conclusion…

Background videos can really set your design apart from the rest, just make sure you do it well. Follow these 10 guidelines and you'll be well on your way.