Using Video Backgrounds on Websites

One of the more noticeable trends in web design right now is using a short video as a background on main pages.

A video gives more depth visually and emotionally than a static image and has a technical “cool factor”. The main draw back is video file size and how it affects page loading speed.

The technical side of using video backgrounds means making sure the video doesn’t load on mobile devices. The video needs to be a background with CSS media queries making sure the file is only downloaded for laptops and desktops. Unfortunately, even with proper coding, internet speeds will be an issue because they vary from city, home, businesses and coffee shops.  Another consideration is how your website data is being sent to internet surfers. Many websites are on shared hosting plans where the bandwidth of the server is limited and divided up.

It is still best practice to have websites load within two seconds. Keeping web pages as light as possible for user experience and SEO is a must. Optimizing files and images to stay around 1MB or less is a good but challenging when using the many design features available for websites.  If the web page takes longer than two seconds to download and render then maybe 1MB is too much or other optimization techniques need to be used. FYI, a background video will add at least .5MB to a webpage’s size.

So, should a background video be used?  It might still be a little early considering the above speed factors but if the video is specific to the business and will make a positive impact on user experience (especially conversions) then go for it. Before making the video a permanent feature though test webpage load times and that it shows up only on the correct devices.

Video Background Design Tips

  • Don’t put too much text over the video.
  • Use contrast so the text is easy to read.
  • No sound.
  • Keep the video relevant to the business.
  • Smallest possible file size.
  • Stop the video from loading on mobile devices.
  • Check how webpage speed is affected.

Fortunately many WordPress themes now include coding to conveniently and properly add video backgrounds. Even adding video features to other types of websites is straight forward.

Let us know what you think of the article and if you are considering adding video to your website.