A quick guide to video mastheads
“We’d like to upload a video to our masthead, can you help us get the right file up?”
“Why isn’t our video masthead displaying correctly?”
“Can you advise on best practice for uploading a video to our masthead?”
“Why is the video in our masthead taking forever to load?”
These are all questions we’re often asked by our clients. And while of course the answers vary by use case, the basic principles are the same.
(Just to be clear, when we talk about a video masthead we are referring to a motion asset that occupies the large content space on your website. So they are essentially header images, but with motion. They play automatically on a loop and don't have any sound).
So we wanted to share a short, simple list of best practice rules you can follow to make sure your video mastheads are performing as well as they can.
1. Keep your video file size down to a maximum of 5mb. Why?
- Your video will play properly. Larger video files are more likely to stop-start or just freeze.
- Your website will be more sustainable. Large video files increase the carbon footprint of your site, so the smaller your files, the bigger your contribution to saving the planet.
- You won’t destroy your users’ mobile data (it can be very frustrating for someone to open a web page containing a 50mb video file, only to find their entire data allowance has been eaten up trying to load it).
2. Make sure your video is around the 20 second mark and work on a loop. Why?
- To help keep the file size down (which we already know is good).
- To ensure a seamless transition when the video replays. Being on a loop helps to add a nice transition back to the start.
3. Create videos in both .mp4 and .webm formats. Why?
.webm videos optimise better than .mp4, which means you can get a better quality video at a lower file size (yet another reason this is good). Webm files are also now supported in all modern browsers, so they’re more easily and widely used. For users who can’t view .webm files we can serve them the .mp4 file as a fallback.
4. Export the video without sound. Why?
We can tag your videos in the HTML with mute and autoplay, but it’s best to export the video without sound to make sure it’s not paused by the browser.
5. Add play/pause controls and a poster image for the video. Why?
- Play/pauseTo ensure the best experience for all of your users, allow control of the video so it can be paused and played using the interface. Users with reduced motion enabled will see a static video when they land on the page.
- For instances where the video can’t be loaded, a poster image can offer a good fallback to make sure the page isn’t left with an empty space.
And that’s it! If you’d like to hear more about anything we’ve talked about here just get in touch, we’re always happy to have a chat: firstname.lastname@example.org