How to Use Website Background Videos on Website

What is a website background?

Video backgrounds on websites have existed for a while now and have been used to varying degrees of effectiveness by some of the biggest companies in the world. Nike, Spotify, and Media Bloom have all used video backgrounds very well in the past and the reason is simple. Websites with video attract more attention than those without, they make websites look more modern and artistic when done well, and even when not, they stand out from the rest.

Photo by Alex Haney on Unsplash

One case study describes a 138% increase in conversions following the adoption of video backgrounds. This amount might seem incredible but even a fraction of that reported improvement is worth the effort.

Your main motivation for using a video background is to quickly communicate value and reinforce your brand. With that in mind, you should be sure to use video which is appropriate to your overall marketing strategy and is congruous with the type of company you operate.

What type of video is right for me?

The type of video you use can be self-produced live video, gleaned HD stock video, animated explainers, or any other form of video you can think of. There are a few different types of videos that lend themselves well to different business types. Let’s go through three examples of this:


Live human subjects

Using actors or members of your staff is a great way to put a relatable face on your product. It particularly lends itself to tangible products. You can quickly and without any input from a website user, show your product in action and demo how your customers enjoy your products.

Photo by redcharlie on Unsplash

A typical example of this is a website from The Yacht Company which has an excellent auto-playing video showing real people enjoying yacht charters. Compare it to this charter company and it should be clear which website is more effective.


Animated videos

If your product is a non-tangible product such as a technology or design service it can be tricky to show someone interacting directly with the product. Here’s a cool example from Yum Yum Video which shows off the company’s capabilities in a fun way while demonstrating a variety of animation techniques. The video comes in on the landing page and shows infographics, transitions, animated characters, and showcases several different animation styles while staying within the brand guidelines of Yum Yum.


Scene-setting video

Scene setting videos are excellent for, you guessed it, setting a scene. This is especially valuable for companies where the location is paramount such as travel agents, restaurants, or bars. Check out this beautiful landing page from Google Arts & Culture which takes you through some of the spectacular sights of the national parks in the US.

Photo by Dino Reichmuth on Unsplash

If your product is in a glorious location, or your interior design is particularly special then take people there before they get there. It’s a great idea to put your best foot forward on your website and if you can show people ahead of time what kind of experience, they are going to have then put it right at the front of the website and suck people in.


Things to watch out for

It should be clear now what types of videos might be suitable for your company so let’s go through some do’s and don’ts that work on most websites, broadly speaking.


Don’t have audio auto-playing

Most web designers avoid having music and audio, unprompted on the landing page of websites. The reason behind this is that many people will immediately bounce off a website without being prompted to enable audio. They might be in the office, on public transport, or doing anything when they do not want to disturb people around them.

This of course means you need to use video which works just as well with and without audio. Save the voiceovers for your testimonial or explainer videos.


High contrast

A drawback to using video is that it can distract from the written content on a page. To combat this, you can use contrasting colors, light/dark overlays, or colored overlays to distinguish the text from the background content.

If you use a whole page background video then keep the text on the landing page to a minimum, if you would rather include more informative text on your landing page then you should consider using a video header rather than a whole page video.

Not all videos are created equal so try using a few different ones and seeing what each one does to the traffic on your website. An A/B test can be a good way to do this.



Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.