10 Guidelines for Better Website Background Videos

Share this article

Video backgrounds

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

Pattern overlay

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.

Low contrast text on video
Image courtesy of Pexels

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.

Frequently Asked Questions on Website Background Videos

What are the best practices for using background videos on my website?

The best practices for using background videos on your website include ensuring the video is relevant to your content, keeping it short and looped, and making sure it doesn’t distract from your main content. The video should be high quality but optimized for web use to ensure it doesn’t slow down your site’s loading time. It’s also important to consider mobile users and provide an alternative static image for mobile view.

How can I optimize my background video for better website performance?

To optimize your background video, you should compress it to the smallest file size possible without compromising on quality. You can use video editing tools to reduce the resolution, frame rate, and bit rate. Also, consider using a video hosting service that offers automatic optimization and streaming capabilities.

What resolution should I use for my website background video?

The resolution of your website background video should be high enough to look crisp and clear on large screens, but not so high that it slows down your site. A resolution of 720p (1280×720 pixels) is often a good compromise between quality and performance.

Can I use stock videos as my website background?

Yes, you can use stock videos as your website background. Websites like Pexels offer a wide range of high-quality, royalty-free videos that you can use. However, make sure the video is relevant to your content and fits well with your website’s overall design.

How can I make my website background video mobile-friendly?

To make your website background video mobile-friendly, you can provide an alternative static image for mobile view. This is because videos can take longer to load on mobile devices and may not play automatically. You can also use responsive design techniques to ensure the video scales properly on different screen sizes.

Should my website background video have sound?

It’s generally recommended to mute your website background video. This is because unexpected sound can be disruptive and annoying to users, especially if they’re browsing in a quiet environment. If you want to include sound, make sure there’s a clear option for users to mute or unmute the video.

How can I ensure my website background video doesn’t distract from my content?

To ensure your website background video doesn’t distract from your content, you can use a subtle, slow-moving video and place it behind a semi-transparent overlay. This can help to soften the video and make your text stand out more. Also, make sure the video is relevant and complements your content, rather than competing with it.

Can I use a GIF instead of a video for my website background?

Yes, you can use a GIF instead of a video for your website background. However, keep in mind that GIFs can be larger in file size than videos and may not look as smooth or high-quality. They’re best used for short, simple animations.

How can I add a background video to my website?

You can add a background video to your website using HTML and CSS. The video file should be uploaded to your web server or a video hosting service, and then you can use the HTML5 video tag to embed it in your webpage. You can use CSS to position and size the video, and to add a fallback image for browsers that don’t support video.

What are some common mistakes to avoid when using background videos?

Some common mistakes to avoid when using background videos include using a video that’s too long or large in file size, not providing a fallback image for mobile or older browsers, and using a video that distracts from your content. It’s also important to ensure your video is accessible to all users, including those with disabilities.

Angus RussellAngus Russell
View Author

Angus Russell is a co-founder of BG Stock - a stock video library specifically for website background videos. He's constantly learning more about video on the web, and loves sharing his knowledge through tutorials, articles and free plugins and resources.

AlexWvideo backgroundsweb video
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form