Best Practices for HTML Background Video Optimization

You've seen them everywhere: large, full-width background videos on websites. Usually located at the top of a page, they bring life and motion to what might otherwise be another boring value proposition. There is no denying that a well done background video can really set the tone of your website and add impact to your page and message. The issue is that these videos can be large and degrade the user experience if not optimized correctly.

In this post I'll cover the main points you need to know when creating a background video for a website.

Keep Background Videos Short

No one is going to sit and watch a 60 second background video. Do not flatter yourself. Your team eating lunch, your office, people putting sticky notes hither and thither - news flash: your user has probably already read your value proposition and either desired to keep scrolling, clicked away, or closed the tab.

Remember, this is a background video, not a product or instructional video. There is no reason for video to be longer than 15 or 20 seconds. A smaller duration clip keeps the size reasonable, and can begin streaming quicker. If you need to show 60 seconds worth of content, maybe you need an actual promotional or marketing video!

Reduce Motion and Speed

You do not want to give your visitor a sense of vertigo when they visit your site if there is fast motion. Also, there may be text or a call to action link over the video, and a lot of motion will make that harder to see and interact with.

Optimize the Video File

There are three main things to do here:

1) Keep Dimensions Standard HD

Your video can be HD (high definition), which is 720p video (1280 x 720 pixels). There really is no reason to export a background video in Full HD (1920 x 1080) - that's simply overkill and wastes bandwidth.

2) Keep The Frame Rate Low

A frame rate of 24 or 25 frames per second is adequate. We're not producing a Hollywood movie, after all! Fewer frames means a smaller file size.

3) Remove the Audio Channel

Background videos won't autoplay with sound anyway, so an audio channel is not necessary. When exporting your video, make sure to omit the audio channel.

As far as how to optimize the video, we use a free Mac app called Handbrake , which has been around for many years and has a number of presets and settings that give you lots of control. If you're more technical, you can optimize videos using the command line using ffmpeg . There are even online services that will optimize video. A google search will reveal dozens.

Optimize the Poster Image

The poster image is the image that is displayed while a video is loading. It's commonly the same as the first frame of the video, so the video loading looks seamless. Don't forget this image should be optimized like any other image.

Serve Multiple Video Formats

If you want to cover your bases with various browsers, export both mp4 and webm format videos. The compressed file sizes of these videos will probably be very similar. Here is a simple example of how the code might look on a webpage:

<video poster="/bg-video-posterimage.jpg">
  <source src="/bg-video.webm" type="video/webm">
  <source src="/bg-video.mp4" type="video/mp4">
</video>

{# Note the 'data-' attributes and blank autoplay for lazysizes unveilhooks plugin, so none of this loads on mobile. #}
<video preload="none" data-autoplay="" loop="loop" muted="muted" volume="0" class="lazyload" data-poster="{{ bgVidPoster.url }}">
  {% for video in bgVideos %}
    <source src="{{ video.url }}" type="video/{{ video.extension }}">
  {% endfor %}
</video>