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:

We provide multiple formats because not all browsers support the same video formats. Using "source" elements, the browser will use the first one it understands (e.g., Safari will use mp4 and Chrome will use webm).

Now that the video is ready to display on your page, consider the following points:

Provide Contrast

If you have text or other element over your video, make sure there is enough contrast to read it. Often, a semi-transparent color overlay will be placed over the video to help the text above it stand out. An overlay also helps hide minor artifacts that may be in the video after compression.

Add a Pause Button

Some users simply don't want to be bothered with bells and whistles (or motion) on a website, and that's fine. For background videos, you can add a pause button with JavaScript. Another thing to consider is that a video set to loop will keep looping as long as that user has a tab open, so again, JavaScript can be used to pause the video after a certain amount of time.

Example Background Video Optimization: Tesla

As of this writing, Tesla has a background video on their Model Y page: https://www.tesla.com/modely

That video looks great, and shows their product in action, like a commercial. A few things about that video:

• It's only 14 seconds long
• There is no audio (though this video does have stereo audio channels with no sound. Perhaps removing those could reduce file size further)
• The video loops
• There are video controls if you hover over the video, allowing the user to pause it
• There is sufficient contrast to read the text above the video
• It is in mp4 format (they aren't even serving webm as an alternative source on desktop)
• The dimensions are 1254 × 1080 (odd dimensions, but closer to square to fit their page design)
• It is only 2.9MB in size
• Frame Rate is 25 FPS
• Bit rate is 1.68 Mbit/s
• They serve an alternate webm version on mobile

Overall, this is a solid example of background video optimization.

Final Optimization: Mobile

Depending on the project, there may be a need to show a smaller video on mobile, or no video at all (using an image instead) to save your users' bandwidth. We pay a lot of attention to Google Page Speed Insights and Core Web Vitals, which I talked about in my Improving Google Page Experience With Core Web Vitals post. This is critical if you want your site to render pages quickly.

Looking at Web Vitals on projects with background videos that are supposed to display an image on mobile, we noticed that even though the video was not showing on mobile (because we were hiding it with CSS media queries), it was still continuing to load in the background, as was the poster image for the video. We didn't want any part of the video element to load (we wanted to show a completely separate mobile image that we had more control over with CSS than the poster image would have allowed) so we had to take one more step. This was easier said than done - in searching around the web, there wasn't much info on lazyloading a video poster image.

We needed the help of some JavaScript to achieve this. We were already using Lazy Sizes to lazyload images (meaning, it keeps the images from loading on the page until the user has scrolled to the image, allowing pages to load faster). We realized there is a Lazy Sizes plugin/extension called unveilhooks that extends lazySizes to additionally lazyload things other than images, including scripts/widgets, background images, styles and video/audio elements.

Here's an example of how we implemented that on a video element. The example code is in Twig and the site in question was built on Craft CMS, though this method would work with other templating languages and other systems, too:

If this video element is not visible on the page (i.e. we're viewing the page on mobile) unveilhooks will leave this alone, and it's as if there is no video tag on the page. If the video is visible on the page (i.e. desktop), unveilhooks will set autoplay and allow the poster image to load as well.

Conclusion

There aren't too many steps needed to make sure that a background video is well optimized. In the beginning, you might get tripped up in the optimization stage with frame rates and output dimensions, but once you've optimized a few videos, it becomes pretty easy to know if you've struck a good balance between file size and video quality.

Hopefully you can use this article as a reference if someone needs to create a video and is asking questions like "how long should the animation run before it loops? Are there technical parameters the animator should know in order to make the file as 'light' as possible to reduce load time? What file format is preferred?" - which are exactly the types of questions that prompted this post.

Good luck with your background videos!