Using video in a website header - 6 technical tips

Website header videos have been one of the biggest trends in web design for a few years now. Despite the user-friendly movement to promote fast load times and mobile experience, a video may be still the best way to visualize your product or service. That’s why I’ve prepared a list of do’s and don’ts. In this guide, I want to share a few technical tips on how to place video on a website properly.

Here’s a great example:

Badly prepared video files and careless website code may have negative consequences, like:

  • slowing down the page load time
  • decreasing SEO score and search results ranking
  • increased mobile data usage


We can - technically speaking - distinguish two types of header videos:.

  • Background video - is short, auto-played and looped in the background, most of the time overlayed with some text caption
  • Foreground video - this kind of video is longer, incorporates audio and a play button.


Methods of optimization don’t vary a lot for those two, but this guide focuses on the background video type only.

Background header videos principles

This kind of video is very common in web design. It can look awesome and create a nice feeling to the website. It usually covers all of the first page screen. That’s why it’s very important it’s not only looking great, but also loads fast. To accomplish that, we have to keep two things scaled perfectly - the video quality and the file size. The optimal resolution is 720p and file size shouldn’t exceed 8MB in total. Here are a few tips on how to prepare a perfect video:

1. Keep it short

Background videos are more likely meant to visualise an idea, a service or a product, instead of being a full length movie. The optimal length is between 15 and 40 seconds. Shorter videos may seem repetitive. On the other hand, longer videos will result in a big file size or vast quality decrease due to compression.

2. Remove audio

Autoplayed video shouldn’t have any audio. It’s considered a good practice not to disturb visitors with sounds because a lot of people listen to music while browsing the Web. It’s possible to mute video sound in HTML, but the best solution is to cut out the entire audiotrack from the source as it reduces the file size a lot. If you really need to include the sound, you should consider using a foreground video and a play button. Which we did on the TFSport website as a good example.

https://www.tfsport.co.uk/

3. Resolution and bitrate

It’s tempting to use 1080p. The video will look crisp and sharp on big displays, but we need to have the file size in mind. The general rule of thumb is to use 720p and go as low with the bitrate as possible - something between 500kb/s and 800kb/s is fine. Keep in mind that the video will be overlayed with a half-transparent layer, so the quality drop won’t be visible so much. Also, don’t set the framerate higher than 24-25 frames per second. If your video isn’t supposed to be fullscreen, alter its height or width accordingly. Here are two great examples:

https://www.bukwild.com/
http://www.portofmokha.com/

4. Poster image

Some mobile devices, like iPad or iPhone, won’t autoplay a video when a website is opened in the browser. That’s why it’s necessary to provide a so-called poster image, which replaces the video when needed.

5. Multiple file formats

Modern browsers are able to render videos in various formats. Apart from the mp4, there is also the ‘WebM’ format, which is focused on addressing the unique needs of serving video on the web. There is also ‘OGG’ multimedia format which was recommended some time ago because of it’s open standard and easy distribution methods. It’s far less popular nowadays, but it’s still supported.

The HTML <video> tag can provide several file sources and allows the browser to choose the best it supports. It’s recommended to always provide video in mp4 and webm formats.

6. Video optimization

The MP4 file metadata is stored in so-called moov atom, you can think of it as a kind of table of contents for the video. The moov atom is normally stored at the end of the file, after all of the information describing the file has been generated. The video will not start playing until the moov atom is loaded. Therefore if a planned delivery method is progressive download or streaming, the moov atom should be placed to the beginning of the file.

To change the position of the moov atom you can use a free software called HandBrake. In the summary section of the application check the ‘Web Optimized’ checkbox, which does exactly that.

Handbrake video web optimization

Handbrake can be also used to convert videos from nearly any format to a selection of modern, widely supported codecs. In fact, Handbrake is able to perform all the actions mentioned earlier needed to prepare a great video file.

The video tab contains quality/bitrate settings, frame rate and encoder selection. In the audio section we can remove the audio track completely and in the dimensions tab there are options to change the resolution and crop the file if needed.

The only feature missing in Handbrake is saving a file in webm format. Fortunately, a simple mp4 to webm online converter will do the job. Just make sure to run it on the processed file.

Wrapping up

Small tweaks make a huge difference when it comes to video file size. Changes like:

  1. Setting a perfectly looped 15-40 seconds clip,
  2. Adjusting resolution, framerate and bitrate,
  3. Removing audio
  4. Choosing a pretty poster image
  5. Generating a webm file

All it leads to improvement of the site load time, visitors experience and site rating in performance tests will take 15 minutes of developer or designer work.