What is “background video” exactly?
In the world of website design, background video refers not to the videos with sound that people commonly embed from YouTube (designed to be watched in their entirety) but rather to video that is used as a design element, in the place of where a background photo would have been.
Examples of Good Background Video Use
To better understand what background videos look like in practice, check out these websites that have done a great job incorporating background video into their designs:
Google Arts & Culture National Parks Guides – Because of the background video on this website, you get to feel the grandeur and majesty of our National Parks, all within mere moments.
The Yacht Company – On this website not only are you reading about yachts – thanks to the background video, you’re also imagining how a summer breeze or the cool ocean water would feel on your skin.
Floor Inc. – While you’re reading Floor Inc’s company intro on their website’s homepage, the background videos allows you to feel the joy and comfort of a family hanging out on the floor in their living room.
See how background video can in many cases express what words and pictures alone cannot?
If you’re going to make the move to featuring background video on your website, following the three tips below will ensure that you reap the rewards while avoiding some of the common pitfalls.
Tip #1: Choose wisely
Before you choose a video, ask yourself what you want this video to convey. Ideally, it’s not actual information that you’re trying to communicate but rather an overall feeling such as joy, comfort, and excitement.
As you browse videos, look for ones that have some movement but not so much that they could be visually overwhelming. Wondering where to start your search? It’s always worth starting with Unsplash in case you find something for free. I also recommend StoryBlocks for a huge library of premium background videos for purchase.
Lastly, you’ll ideally want to choose a flexible video that will work well for users on ALL devices. A flexible video will work even if for example the top, bottom, or side edges are blocked from view (such as on mobile devices). After you’ve uploaded your background videos, check your website on desktop, tablet, and mobile view to ensure it works in all places.
Tip #2: Be mindful of your video’s file size
Adding a video background to your website can add a big server load to your website’s host, slowing down your website. To minimize this load, it’s important to keep your video’s file size JUST as big as it needs to be to deliver a great user experience.
How many seconds long should your website video be? Considering that most users will scroll past your video within five seconds, often a 10 or 15-second video will be more than sufficient.
I recommend the app WonderShare for exporting a video that is compressed and just as high-resolution as it needs to be. Try a Google search for “free video compression” to see what else you find.
Tip #3: Aim for high contrast between background and text colors
A common pitfall when adding a background video to a website is that the overlayed text is difficult to read due to the low contrast between the color of the text and the color of the background video. Make sure your video is darker with light text on top or lighter with dark text on top, to ensure easy-to-read text.
Looking for more?
If you enjoyed the post from Janelle (that’s me) at Ellanyze, you might like these other quick reads on photos, video, and site speed on the blog!
Video On Your Website: 3 Creative Ways to Rock It
