“Is that background moving?! Is that a video? In the background!?”
Wow, yes. Between 2005 and 2010, every marketer in the world asked or thought this question at least once. The first time you saw a video background on a web page, it was one of the coolest most interesting things you could find on a website in terms of website design. Like any cool trend in web design, it soon became quite common, and of course, often overused.
Today, however, video background remains a very engaging design function and can serve as a great tool for certain websites. However, before throwing that video clip in your website background, take these 4 things into consideration:
1. Site Speed
Site speed is getting more important each day. Both from an SEO and a usability perspective, a quarter of a second of extra load time can make the difference in ranking first or fifth, and if a visitor will bounce or stay. A video is one of the biggest file types that can be on a website, and depending on where and how you use a video background – it can add serious load times to your page and decrease your site speed. Compress the background video as much as possible and keep it short as possible by making it a loop.
2. Do you really need it?
The video is great, trust me, we’re a video company. But sometimes, believe it or not, you can have too much video. Before giving your web page a video background, ask “Do I really need this or am I just using it because it seems cool?” Does it advance a marketing message and entice visitors down the funnel? Do you have a standard embedded video on the same page? Are there a lot of other static photography and graphics?
All of these questions should be considered. Why? Because they do bring some problems and if you can avoid using it by accomplishing the same result with a simpler method, you should really consider.
3. Mobile Users
Video background does not work on mobile. So you’ll need to have an alternative design feature built in for your mobile traffic. This will require some coding to remove the video from the background on mobile.
4. Overlays & Text
If you’re shooting video specifically to be a video background, make sure to take into account any overlays or text that might appear on the website over top the video. This will affect how you’ll shoot and what color effects you’ll put on the final version. For example: if you are planning on using black text to overlay the video, make sure to shoot video that is bright and have light colors throughout (and visa versa).
For examples of great video backgrounds that did it right, check out these three examples:
ViaForge: a web design company who used a subtle, small video to further convey their brand theme.
USA Philips: this unique half page video catches your eye with an up-close shot of a man’s face, making you wonder what’s next.
MrSmith Agency: Buffalo’s design agency combines sleek video with animated typeface to bring their site to life.