Video Backgrounds: The Essentials

By: Cathal June 26, 2017 2.5 mins read

Former front-end dev, now trying his hand at drawing and taking pictures.

Over the last few years, website video backgrounds have become a popular mainstay among many design-oriented companies, businesses and brands. Although once only seen on a small number of innovative websites, this practice has exploded in popularity over the last few years. And the reasons for this aren’t solely to do with how they enhance a website’s overall design.According to some recent statistics, using a video background on your homepage can increase engagement and conversions by up to 20% and more.

In this week’s blog post, we look at some of the essential principles and practices to keep in mind when integrating a video background with your website. Take a look.

Essential Tips and Considerations

Is a Video Background Appropriate for your Site?

Before you start sourcing your content and figuring out how to integrate your video into your site design, it’s important to ask yourself a key question: what do you hope to achieve with your background video?

Video backgrounds can really help set a website’s tone, mood or style – which can help convey a brand or business’s ethos to a potential customer. Not only that, but they can help elicit a particular emotional response in your website’s visitor, which can help encourage a particular outcome.

Many businesses, companies and organisations will use video backgrounds to help convey the ethos of their service. Imagine a service offering a new piece of technology, such as a fitness app, for example. An effective video background might include footage of a healthy looking individual jogging or exercising, as well as footage of the person using the new app in their daily life. A video like this will help convey the idea of wellness and healthy-living, and also illustrate how the visitor might benefit from this new technology.

Generally, websites promoting specific services, brands, products and physical locations, such as shops, restaurants and bars can find a way to use video backgrounds effectively.

There are some kinds of services or businesses that might actually suffer as a result of their video backgrounds. Some websites, by their nature, are offering services or products that are complex and multifaceted. In order for the visitor to fully understand the benefits and value of the service or product, they need to digest more information than is possible via a simplified visual short-hand, like a video background. In cases like this, trying to condense the essence of your product or service into a short video might be misleading or confusing for the visitor, and hence distract from the actual service or product.

For this reason, it’s important to think about whether or not you can condense and convey the essence of your service or product into a short video.


Example of video background on Big Dog designed website 212 Yachts. Source:

Length, File Size and Quality

Maintaining high-definition quality is important, for obvious reasons, but this will have an impact on the size of the video file. Because you want to ensure that your web-page continues to load quickly and efficiently, you will want to avoid using overly large files.

There are a few ways to get around this. Firstly, keep the length of your video short (5-10 seconds long) – but edit it in such a way that it loops naturally and effectively. A good rule of thumb for file sizes is 6mb or less.

Video Style

More often than not, you’ll want to overlay some text or other graphics on top of your video background. For this reason, it’s important to make sure that the background video doesn’t compete with the legibility of the text.

The first thing you can do is ensure your text contrasts strongly with the background video, by choosing a contrasting colour for your text. For example: white text on a darker video; dark text on a lighter video.

Additionally, another handy approach is to overlay your video background with a layer. Some people go for black or grey layers over their video, while others might go for brand-relevant colours. Whatever the case, this can help create a bit of seperation between your buttons and text and the background video. Not only that, but it can also help hide any compression artefacts that occur as a result of your video quality or file size.


Another example of a video background for Big Dog-designed site:

Audio or No Audio?

Studies have shown that audio that automatically plays on websites drives visitors away from your website. This practice appears to be a serious irritation to most people, so it’s best avoided.

Video Controls

A video background serves a different purpose than a corporate video, a promo or an instructional video embedded on your site. For that reason, it’s important to follow best practice when integrating into your website.

While allowing visitors the ability switch to full-screen, stop and start the video, and so on might make sense for your embedded promo video, it will only diminish the impact of your video background. For that reason, we would recommend removing any video control options from the video.

Sources/Further Reading: