Full-Screen HTML5 Video Background

WHY USE FULL-SCREEN VIDEOS ON YOUR WEBSITE?

You’ve probably seen them: website that feature a full-screen, responsive video as the background to their website, with text and other content laid over the top. It’s a key design trend that has been made much easier to create thanks to HTML5 and the explosive growth of responsive web-design. 

A good video can communicate so much. A short film can be funny, heartwarming, tell a story, showcase a product or create empathy and compassion far quicker than text alone. It can allow you to bring a company or organization to life, and create an instant connection with your website users.

With that said, video is a powerful tool that can also be done wrong. Overly-long videos, confusing or distracting videos, videos that rely on sound to communicate their message — these can all detract from your website rather than add to it. You want a powerful, focused video that truly creates value for visitors to your website. We will look at some great examples of websites that use video well later in this article, but first here are some tips on creating a good video that is intended to be used as a HTML5 video background. 

WHAT KIND OF VIDEO DO YOU NEED TO USE AS A FULL-SCREEN WEBSITE BACKGROUND?

Not any video will do. You can’t just grab the video you made for your YouTube channel and expect it to plug-and-play. No, the video being used as a website background is fulfilling a very specific purpose. It is creating atmosphere, and it is putting a face to your company. 

They key things to bear in mind when creating your video are:

  • Grab attention with the first shot, and get as much across in the first 10-15 seconds as you can. Website users are not going to hang around while your video slowly gets going.
  • Do not rely on sound — most website users will have the sound switched off, or have their own music/soundtrack going. Use captions, or make sure your message gets across with visuals alone. 
  • Ensure your video is high quality — this is a hard thing to judge, especially as making a video look ‘home-made’ can add authenticity. However, if in doubt, bring in a professional. This is the front page of your website, and a poorly edited, badly lit, jerky video that looks like it was shot on a cell-phone camera is not going to create a good first impression!
  • Think about color: chances are you are going to have some content over the top of the video, so filming in a restricted palette can really help to ensure that text pops. Remember, this is a background video.