Video Backgrounds In Web Design

Written by
Nathan Bolton

Video backgrounds are becoming a popular trend in web design. It’s easier than ever to capture beautiful HD video, even using consumer-quality equipment. And as internet speeds increase, more websites can make use of large files like videos.

There’s no doubt why this trend is taking off. Huge, full-screen video backgrounds offer immediate visual appeal for website visitors. But there are a few things to keep in mind if you install them on your own site.

Keep it Quiet

Don’t play sounds by default. When a website starts playing sounds without prompting, it’s an easy way to turn people off. It can be jarring and unexpected. Worse still, the visitor could have their own music or videos playing on their computer.

If sound is important to your video, you can provide the option for the user to turn sounds on. This pattern is used by the popular video sharing service Vine.

File Size Still Matters

Make sure to compress your video to get it as small as possible. Consider reducing its dimensions too. Not every video needs to be in 1080p Full HD to look good. Many visitors have bandwidth caps, especially if they’re visiting your site on mobile devices. They will appreciate not having to download a full, uncompressed video each time they visit your site.

Add Video to Your Site Easily

To install video backgrounds on our sites, Bone uses the jQuery plugin Vidbg.js. It provides an easy way to drop a video background into your site with a few lines of code.

To host your video, you could use a Vimeo Pro account, or Amazon CDN. These services ensure your video is hosted on fast servers that can handle large files. And they also stream the video to your visitors, so they don’t have to wait for the full file to download before it begins playing.

Video Backgrounds in Action

This technique generates visual interest that is especially useful in the tourism industry. Your visitors immediately get a taste of the excitement your business offers. Eagle Wing Tours is a great example of this. From the moment they visit the site, viewers get a taste of the sights they might experience on a tour.


Video backgrounds can be a great way to enhance websites, if done correctly. Hopefully the best practices shared in this article will help you use them effectively.



Ready to get your design project started?

Let’s get together. Contact us by phone or email and we’ll get in touch to chat about your project. Coffee is on us.

250 984 BONE (2663)
BONE Creative
Studio 100 - 1600 Quadra St
Victoria BC Canada. (Map)
V8W 2L4

Contact BONE Creative

We acknowledge and respect the lək̓ʷəŋən peoples on whose traditional territory we work, and the Songhees, Esquimalt and W̱SÁNEĆ peoples whose historical relationships with the land continue to this day.

You are here:Home » Articles » Video Backgrounds In Web Design