Since launching Coverr.co about two years ago, we’ve seen an explosion in interest and usage of background videos on websites. Of course, in the world of web design, trends come and go, but take a peek at sites across a few different industries and you’ll see that background videos (and the increasing primacy of video, in general) means that this is one trend that’s probably going to stick around.
For those uninitiated, background videos are short, looping snippets of video which play on webpages (often on the homepage) and add a cinematic, engaging element that’s a step above stock photography. Increasing internet speeds, HTML5 technology and the easy availability of HD video content have all contributed to make background videos much easier to create and implement.
If first came the “hero image,” now we’re in the age of the “hero background video.”
However, there are some basic considerations and design tips you should take into account when thinking about how to thoughtfully implement background videos.
Full screen or partial screen?
It’s become popular to make the homepage of a website a full screen video, with just a little room for navigation elements at the top or sides. This can be a very beautiful and engaging format, especially if you have a completely unique background video. However, it may be wiser to incorporate a partial screen background video that takes up less inches of real estate on your page. Partial screen videos gives a more subtle, less distracting effect and allows access to other elements you may want users to click on. Think of them more as a transitional or divider element.
Silence is golden
As a general rule, background videos should not have ANY music or audio elements. Having music play in the background of a website is a very 90’s web design choice that now comes off as tacky and usually just plain annoying. If you have a full screen video on your homepage that you want users to watch in its entirety, it is ok to incorporate sound into the video, but give an easy option to toggle it off quickly, or a pause/play button.
The importance of simplicity and contrast
The best background videos are relatively simple, steady shots with little to no camera movement. (Aerial drone footage is an exception, and there are many drone sequences out there that work perfect for backgrounds.) They aren’t frenetic, epileptic-fit inducing action sequences that look like a summer blockbuster movie. Remember, background videos are a complement to your web page design, not the main attraction.
Since you’ll usually be overlaying text over the video itself, you also need to have enough contrast between the video and the typography so that a user can clearly read what’s on top (often your company name, brand proposition and main call to action — important!) White text over dark background videos or black text over light ones will be more readable. You can also add a filter or shading to a brightly colored background video to make it more muted.
10–15 seconds in length, or stitching together multiple shots
10–15 seconds is a good length for a single shot background video. You will probably set it to play on a loop, so again it’s great if the footage has only subtle movement that doesn’t look jerky/ jumpy when it “restarts.” Alternatively, you can stitch together a few background videos with elegant transitions to create a more dynamic or lengthier element on the page.
Adding multiple background videos across a site
While background videos are most commonly implemented on the homepage of a website, one cool design trend we’ve seen is to have a background video at the top of each sub-page of your website. Each of the videos should be thematically linked to that page’s content.
Stay “on brand”
While it might be tempting to add a shiny, beautiful background video to your site just because, you should think carefully about how the video will fit with your website’s content and — at a higher level — your brand. Having a generic although pretty nature background video with no connection to your product or service is fine, but the best background videos are closely visually linked with the message you’re trying to send. If you don’t find sequences that suit your business, consider getting a custom one made.
Technical issues
Lastly, when implementing a background video, you’re going to likely need the video in 2–3 formats in order to be able to support the widest array of browsers (for example, mp4, webm and ogv). You’ll also need an image that will serve as the first frame of the video that shows up while the video is loading, so that there’s a smooth transition when it starts. Also, the image will serve as the background on mobile, since background videos usually won’t play on mobile browsers. The files themselves should also not be too heavy — between 3–8 MB is ideal — to keep them light but still maintain quality.
*********
Background videos are a web design that we believe is here to stay, because the web is becoming increasingly video-centric and saturated across mobile, social, desktop, etc. A strategically chosen and aesthetically pleasing background video adds polish and sophistication to any website and speaks in the language (video) that users increasingly prefer.
Check out Coverr.co to get free background videos to use for your website, royalty free.
Read also: