Background video loops are cool. We all know that. If done right, it can enhance content and give your web page a wow factor that impresses your users. However, choosing the right background video for your web page is a delicate process, and if you don’t do it right, it could backfire on you. But don’t worry, we’ve got you covered.

Check out these best-practices and tips below to make sure that when you do use background video on your website, that you do it right:

Don’t do background videos just because you can.

Just like any image, typography, color, or icon, you must use it to enhance your content and better connect your user with the intended meaning. Background video loops are awesome, but losing sight of the context of your content is not.

Length of Your HTML Background Video

Length is important. If the video is too short or has a bad loop, it could look glitchy and unappealing. When choosing the right video, make sure you are keeping an eye on all the elements and how they will loop. For example, if you’re using a beach setting and someone is walking along the beach, where is that person when the video starts and where do they end up when the video ends? If they start onscreen halfway through and then only walk a few feet, when the video loops, they’ll be teleported back to the middle again which looks tacky. Try to avoid prominent elements like this in your loop unless they come on screen after it starts and then leave the screen before the loop ends.

Bandwidth – Keep your HTML Background Video under 5MB

Despite the old adage, size does matter. Load time for a website is everything and just because more and more people have access to broadband, you should still be keeping your webpages as lean as possible. Background videos should ideally be under 1MB in size, but I find you can go as high as 5MB and still be passable. Just remember that the user has to load the video before they see it, so if you have a larger video to load and their internet connection isn’t very good, they could a poor experience.

If you’re going to use a larger video, I suggest putting it down the page and not in your main hero area. That way the user see’s an image and some messaging right away, and while they are reading it and starting to scroll down the page, your video has been loading off the screen. So by the time they scroll down, the video is already loaded and in action, making it a seamless experience.

Turn Off The Sound

No one wants to hear your background music. It’s more likely to scare the crap out of them when it loads than actually be something that enhances their user experience. They also don’t want to hear ambient effects of the beach or the mountains or whatever in most cases. Unless there is a specific reason to have sound, and you’ve alerted the user that this is an experience to expect by the context of your content, then never do sound in a background video. Keep it simple.

Contrast and Readability

Your background video is meant to enhance a message. So if your text is blending in with the background and hard to read, that kind of defeats the purpose doesn’t it? So look for videos that have a consistent brightness or dark vs light contrast throughout the entire frame.

Here’s a bad example:

workncoffee

If you study the image, you’ll see that it varies between dark and light spots where text could get lost. If you use lighter text for the bottom, it will pop when it goes over the people, but it’ll get lost on the table or notebooks. Overall, it’s just too varied to really make your message pop. Don’t try and make a bad video background loop work, just find a better, more consistent video.

Here’s a better example from Wistia.com:

Wistia-video

Overall, if the video has a darker contrast, then light text will stand out on top of it. Similarly, a lighter background will render dark text better.

Background video can work really well, but only if it compliments the content that is placed on top of it and it it is legible. Do you have any recommendations on background video? Let us know in the comments!

Hubspot COS Template with html video background template