Fullscreen Video Backgrounds
a handy guide for web developers
Of late, video backgrounds have become so common over the inter webs that every third or fourth page you visit will have one. Why not? It gives the website a fresh, dynamic feel and conveys the message in a much elaborate fashion. So designers doesn’t have to give it another thought before proposing a video background for their next webpage design. But things are not that cozy for the developer. He needs to sort out all the nitty-gritty of having a video on his page now. Hmm.. what’s so difficult you may ask?
- Layout issues, while having a video as background
- Placeholder images to keep the user engaged till video loads
- Art direction of placeholder images
- Playing background video without buffering
- Media formats
- Mobile device support
- Support for older browsers
- Support for Content Management Systems
So goes the list. There are a hand full of ways to meet all the above mentioned requirements. Through this post I’m trying to explain what worked for me in one of my recent projects and get feedback from the community.
Not interested in reading the entire story? Head over to a live demo or grab the fs-video-bg script at github repo . Just add the markup, include the script file and you will be up and running in no time.
Setting things up
Let’s start with a basic video tag.
I’ve purposefully omitted the autoplay and controls attributes from video tag, as we don’t want either of those. Being a background element, user is not supposed to interact with the video. So no need of the video control elements. Also background videos doesn’t need any audio, so adding a ‘muted’ attribute will make sure that no sound is played back even if the original video has some sound in it. Add ‘loop’ attribute if the video needs to be played in a loop.
Now why not autoplay? We don’t want the video to pause and stutter in background due to buffering. But neither do we want to wait till the video gets downloaded completely. Then there is a greater chance that user will move on and the video will not get noticed. So we need to start playing the video once we have enough of it buffered.
But if you want playback to start only after the video has completely downloaded, just use ‘canplay’ event instead of ‘canplaythrough’ to trigger video playback.
There is no single format which has native playback support in all the browsers. Majority of the modern browsers will have support for Mp4. But since Mp4 uses proprietary licensing, certain browsers doesn’t play Mp4 out of the box. So If you need native video playback support on maximum number of browsers, the best bet is to include video in both MP4 & WebM formats.
Setting up the layout
We got the video in place. Now to make it look like a full screen background we need some CSS magic. If you are targeting just the modern browsers, it’s plain and simple. Just set width and height to 100% & set the object-fit property to cover, so that the aspect ratio is maintained.
Most of the browsers except IE & Edge support object-fit property. For those which doesn’t support this property will need a polyfill.
Videos are huge. And it takes time for browsers to load them, especially on flaky connections. Till then we can’t just keep our page background blank. For this we can use the poster attribute of video tag. A ‘poster’ will be shown in background till the video is loaded. This image should ideally match the first frame of your video.
Responsive Poster Images?
So poster image solves our problem of ‘not’ having anything to show until video loads. But there is one catch. Poster attribute accepts only a single image. And this image may not match all the different screen aspect ratios out there. It would be awesome if video tag supported something like what picture tag does for images. A set of poster images that browser can choose from, based on screen’s dimensions & pixel density.
A quick search lead me to a small library called the Posterfill which achieves almost the same. It let us define a couple of poster images and the media query rule to define when a specific poster should get applied. This was not sufficient as we had to support retina devices as well. Taking inspiration from Posterfill, I wrote a little helper library. The markup was modified as shown below to provide responsive poster support.
Support for mobile devices
Using a content management system to author your pages? The above mentioned method works flawlessly on those as well. Since we have kept all the source reference to video & poster assets in the markup itself, it’s quite easy to author & make modifications to the page. Only thing to take note is that, if you can automate the generation of poster images in multiple renditions, that will really ease the authoring process.
Last but the most important thing to look out for is the performance impact of having a video as page background. Every byte that we add to our page will impact the load time. It becomes counter productive if you add heavy videos to your page and users will just abandon it because of the same. Try to keep video duration to less than a minute and load them only after page load event so that it will not impact the critical rendering path. Also make sure that the videos are of good quality and have enough resolution to cover even the widest of screens out there. Compress the videos to an optimal level so that file size is under check without impacting the quality. Another way to compensate for quality loss is to use semi-transparent colour overlays over the video, which will make visual artefacts in low quality videos less noticeable.
Bonus : Compress Videos
If you are not intimidated by command line interface, ffmpeg is the best tool for the job. It lets you compress, convert and even strip audio from your source video all in a single command.
ffmpeg -i source.mov -b:v 1280k -an -y output.webm
Try playing around with the -b:v option which controls the video bitrate. Choose a value which gives you the lowest file size and an acceptable output quality. You can also extract the first frame from your source video to use as the poster image by executing the below command
ffmpeg -i source.mp4 -ss 00:00:00 -vframes 1 poster.jpg
Check out the documentation for a lot more options, which you may use to fine tune the output.
For those who are not comfortable with command line, the next best option is Handbrake. It is free, open source and is supported on all the major platforms.
Hope this guide gave you a heads up on different aspects of having a video background and how to implement them. If you have some thoughts on making it even better, please make use of the comment box below. Thanks!