Tips for using background videos on the web

Background videos are pretty popular on the web today (and have been for a few years). Here at Slicejack we can witness that popularity on a daily basis, since our “Creating a Fullscreen HTML5 Video Background With CSS” post is the most read blog post on a daily basis.
Video isn’t going away anytime soon, in fact, its popularity will only increase in the years to come as internet connections get faster and video codecs get better.

We can all agree that video backgrounds can look pretty stunning if implemented properly. However, if done poorly, they can ruin the website.

These are just two examples of a negative impact that a badly implemented video can have:
– If not optimized properly, it can cause performance issues by slowing down the rest of the website.
– If you don’t choose the right video, it can distract the user from the actual page content.

So, lets look at a few things that will help you avoid these potential website killers.

Video format

There are a few file formats that are suitable for using on the web (MP4, WebM and OGG). You can read more about the browser support here. Although, browser support is important, you should look into using the WebM video format. It has the best size/quality ratio. Just be sure to provide a fallback for the browsers that don’t support it.

Video file size

There’s nothing worse than visiting a website and having the background video stopping and starting as it tries to buffer. It’s distracting and gives the feeling that the whole website is loading slowly. Besides the ‘slow effect’, by not compressing the video, you are forcing your users to download a large video file, wasting their bandwidth. Not a big deal when browsing from a home/office network, but can be, if the user is browsing the web connected to their mobile hotspot.

To avoid this, you really need to compress the video as much as you can. Your aim is to get the smallest file size possible with the best video quality you can get.

Video length

Consider the length of the video. Your video doesn’t have to be long, since it’s being used as a background. By keeping it short, you can also shave off a few MBs from the video file size (mentioned above).

Video sound

Mute the video. There is no need for a background video to have sound. If you want your video to have sound, it would still be a good idea to mute it by default (if the video is on autoplay), and allow the user to unmute it.

Video poster

Nobody likes looking at the blank screen when the video fails to load, so don’t forget the video poster (an image fallback).

The poster is shown when:

• the video is not loading at all
• the video is loading in the background
• the user hasn’t pressed the play button yet

Video overlay

If you aren’t happy with the quality of your video, you can always cover it up with an transparent overlay.
Adding an transparent overlay will also make the content pop out more.

Avoid excessive movement

After all, you are using the video as a background. Background videos should be subtle to avoid distracting your users from what they should really be doing on your website.

In most cases, you’ll want the video to restart once it finishes (loop). Try to prevent the video from jumping once the last frame finishes. You can achieve this by having similar first and last video frames.

Mobile devices

Background video support on mobile devices is not great.
iOS doesn’t auto-play videos. It instead adds a large play icon on top of the video, which opens the media player when tapped. Android devices generally don’t play nicely either, so in both cases you are better off just disabling the video and falling back to a background image.

Conclusion

By following these few simple tips, you don’t have to worry about the video ruining your website, or your users having a bad experience. If you have any questions, or more advice, please leave them in the comments below.

Cheers!