5 things to consider before using a video background
There’s been a trend over the last few years in web design: video backgrounds. Instead of static image or color, the background is an actual video that plays fullscreen. It isn’t something I see every day, but in certain sectors they’ve become quite popular. If the idea interests you, make sure you consider the following five things before you rush out and make a video.
- Is your website appropriate for a video background? Video backgrounds are another one of many web design elements you can include on your website. But just because you can, doesn’t mean you should. First impressions, usually less than the first two seconds, decide whether a person will stay on your site or click the back button. That means the video needs to convey a message, quickly. And it needs to be relevant to what the visitor thinks they went to your site to see. If you’re a creative agency and want to showcase your work in a video that might be appropriate. If your online store sells nails, then asking visitors to watch a video might be too much – unless there’s something really special about the nails you sell.
- You’ll need a web designer. Most video backgrounds I’ve found, and instructions on how to create them, use the HTML5 video tag. But it isn’t as easy as that either. You’ll need the web designer to write the code in HTML5 so that it works on any device (with fallbacks for those that don’t support video). You’ll also want them to make sure the design is still suitable for text. That generally means the text is placed appropriately not to disrupt the video. The text should also contrast with the video enough that it is easy to read.
- Mute the sound. Almost all websites I’ve found using a video background fail on this one point. No one likes to suddenly be accosted by sound when they visit a website. If your video has sound, make sure it is muted in the autoplay settings. But also make sure the mute button is obvious for the visitor to click on if they choose to hear the sound.
- Find the perfect length. A video background can help convey a great message or feeling about your website. But if it’s too short, it might look more like a mistake or something broken if it is set to loop repeatedly. If it’s too long then it no longer is the background of your site, but something getting in the way of your website flow. General guidelines suggest running times of 15-30 seconds. And that the video only runs once. But those are guidelines only. A continuous loop might work for your website, or it might not. You’ll need to make those decisions based on your objectives and what sort of experience you want users to have.
- Remember bandwidth. Even with increasing amounts of bandwidth in general, there are many circumstances where people have less than ideal connections. Keep your video as small as you can, even if you need multiple versions of varying quality to ensure the video looks good to everyone. The guideline for video size is to keep them under 500k, but no larger than 4MB.
If you’re considering a video background, or just want to learn more about it, you might want to read my previous blog about HTML5 and the video tag. I discuss the current status and offer some resources to help understand what it means to use the video tag with today’s browsers.