HTML Background Video Best Practices and Recommendations
Having background videos playing on your site has become pretty popular as of late. We get a lot of questions regarding the best practices, and there seems to be bits and pieces of best practices floating around the web. Here is a compiled list:
- Remove all audio
Assuming you have access to the source video, remove the audio channel completely. You really shouldn’t have sounds coming from an auto playing background video under any circumstance. People find that obnoxious, and it also helps keep the file size down.
- Keep the video relatively short
Background videos are meant more for enhancing a section of a website than it is for showing a full length movie. Typically keeping videos under 40 seconds and having it start and end on the same frame for seamless looping is best.
- Size is important – keep it small
Loading a huge background video will slow down your site and overall user experience. A general rule of thumb is to keep reducing the file size until it starts to noticeably be degraded. Background videos work best with an overlay on the top of them to hide degradation anyways. Try to export videos in 720p and with a bitrate under 700kb/s ( preferably 500kb/s ).
- Export multiple file formats
If you want to be truly cross browser compatible then you should export a video as MP4 and WEBM. That should cover all modern browsers.
- Have a backup in mind
Mobile devices do NOT play background videos. This is by design to save on data usage. You may also run in to a browser that doesn’t play the video for whatever reason, so make sure to have a background image available. The HTML5 <video> element allows you to put a poster attribute on it as well as put the different file formats in order and a backup image to be displayed as a last resort.
Following this list should put you in good shape for having an optimized video to be used in the background of your website.