Like any design decision, there are pros and cons to including a background video on your homepage. In this post, we’ll cover each, as well as some best practices and guidelines to follow for all background videos.
Why They Rock
When done right, background video is beautiful
With the right subject, a professionally shot, high-quality video can make for an exceptional homepage background. A great example of this is Y. Co’s homepage, which features a gorgeous video of the ocean with silhouettes of their product (luxury yachts) bobbing in the background.
Y.Co’s background video provides visual interest while evoking a sense of adventure that compliments their brand messaging. This single element homepage keeps focus on one message and call-to-action.
Videos are engaging and catch the users’ attention
Movement instantly attracts the eye, so the user will focus on the video and overlaid messaging when they first land on the homepage. The hope here is that the user will click on the main call-to-action, increasing conversions in the process.
Users immediately feel immersed in the experience
A video can quickly convey the message or vibe that a company is trying to get across, and may be more effective in communicating an idea or solution than messaging alone.
Video adds interest to an otherwise sparse layout
A homepage should welcome the user to your website by clearly and concisely explaining a company’s services, benefits, etc. This content focus can create an empty feeling page, making it tempting to fill the space with superfluous calls-to-action. A video background can add extra visual interest – without the fluff.
Why They Suck
Background video slows down page load times
Videos are large files that will slow down your page load time. When page load becomes too long, it negatively affects your site’s SEO performance, and statistics show that page abandonment increases too.
Image from Kissmetrics
Video distracts the user from the content and messaging you’re trying to convey
A poorly chosen video can distract site users from the focus and messaging of a site. Whether it’s too much movement, a fast/choppy loop, or a subject that doesn’t make sense – the wrong video will prevent visitors from exploring further.
Users with accessibility needs may find it difficult to read text overlaid on video
Making a site accessible to those who have poor eyesight or accessibility needs is important. If there isn’t enough contrast between the video and overlaid messaging, vision-impaired visitors will have a hard time staying engaged and may leave a site altogether. Your homepage is your first impression. It’s important to make it a good one.
Background videos cause a drop in conversion
Distracting users from the main call-to-action causes conversions to plummet. Wistia, a video hosting service, used a background video on their homepage for about a year and a half, and once they removed it, they saw a 53% increase in organic traffic and 7% increase in conversions.
When to Use Background Videos
Background videos can add energy and visual interest to a homepage. They make sense in some cases, but may not work well for others. Vimeo, a popular video hosting company, features client videos in their homepage background. As a video servicer, this feature makes sense for conveying their brand and emphasizing their clients. The difference between the light text and dark video tones (the contrast) is high enough that it’s easy to read the text overlay. Vimeo also has two easily identifiable calls-to-action for driving users to plan information and a free trial.
While we wouldn’t usually recommend a video with so much action, Vimeo’s choice works well for them. It may be fast-moving, but the focus is mostly off to one side, leaving enough space for the overlaid text to stand out.
Video works well for sites that want to evoke an emotional response, attract visual interest, or create a certain vibe. A background video can give the user a sense of your creative work, show off an impressive feature, or make the user feel as if they’re on an adventure in the Himalayas. As long as the video creates the feeling of an immersive user experience, supports the content, and doesn’t detract from the site’s purpose, they’re ok in our book.
When Not to Use Background Videos
"Because they look cool"
Definitely the wrong reason to use a background video. If there’s no reasoning behind the novelty, background video detracts from user experience and overall site goals. When a site’s purpose is to convert users, it’s generally not a good idea to use a background video. We mentioned Wistia’s conversion problems earlier, but we can find similar issues among other industries as well.
Busy video + busy content overlays
Tesla, the leading manufacturer of electric cars, uses a background video on their homepage. Here we can see that the contrast between video and text is not high, causing much of the text and navigation elements to blend in with the background. While the issue could be addressed by using a tinted layer to darken the video, there are also five different calls-to-action on top of the video that demand attention from the visitor. Having too many choices forces the visitor to stop and think, disrupting the experience and requiring too much effort. Combined with the busy video background it becomes an uncomfortable experience.
Best Practices and Guidelines
Focus on performance.
We know background videos will slow down page load speed, so try to keep them under 5MB. Also, make sure that you’re using a smooth loop - nobody enjoys abrupt stops. Lastly, compress your video file as much as possible, without sacrificing too much quality. Your visitors will stick around longer and your analytics will thank you.
Make sure the contrast between video and text is high enough.
It’s good practice to use a layer over the video to darken it, which makes text stand out when your video isn’t dark enough on its own. It’s all about the messaging and call-to-action, and while you want the video to grab a user’s attention, the goal is for them to engage with the message.
Don’t hide information below a full-screen video element.
Visitors may assume they’re looking at the entire homepage and may not scroll down to see the rest of your content. While it’s nice to leave a “scroll hint”, it’s better to restrict the video’s height. This leaves an enticing hint of content below the video, prompting the user to scroll.
Use a static image on mobile devices.
Users on mobile are statistically less patient than desktop users. They’re also conscious of how much data they’re expending to load a website. Add an inherently large video file to the mix, and you’ll find your bounce rates skyrocketing.
Imarc replaces video with an image in mobile views
TL;DR:
Keep the end-goal in mind: Are you optimizing for experience or conversion?
- Do use background video when you want to enhance the experience of your homepage
- Do not use when you need conversions or to generate leads
- Use a content delivery network, such as Vimeo or YouTube
- Minimize performance impact by compressing video files (if you can't use a CDN)
- Replace it with a static image on mobile
- Use high-contrast text overlays that will stand out from the background
And remember – your website is only as good as the experience it gives.
