Fullscreen Video Background Web Design

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
Performance
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.

TLDR;

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.

How in the world can we do that? JavaScript to the rescue! For video elements there is an event 'canplaythrough' which gets triggered once the browser estimates that it can play the video without having to stop for buffering. Slick!

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.

Media Formats

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.

Poster Images

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.

This gave me the most accurate poster image for current screen resolution and aspect ratio. But since it's purely a JavaScript solution, we have another problem at hand now. Till browser load event is triggered, there will not be any poster images. And on browsers where JavaScript is disabled, we won't be getting any poster. Back to square one huh? The way out is to bring back the poster attribute with a default poster image. But this will cause poster images to get downloaded twice. The default one, and the poster which matches the screen dimensions, which will increase the page weight.

To reduce the impact we may use a thumbnail version of actual image as the default poster which will get replaced with an appropriate one on JavaScript enabled browsers. In the demo page I've used a thumbnail image and blurred it out so that the pixelation is less noticeable.

Support for mobile devices

Though mobile devices support HTML5 video playback, it's not recommended to have a full blown video background on mobile devices. Users wouldn't want to waste their precious cellular data on hippy background videos. Browser makers themselves foresaw this and prevented autoplay of videos on mobile browsers. Videos will not be played unless users interacts with the video by tapping on play button. We cannot bypass this by triggering click events from JavaScript, even if we wanted to.

Our responsive poster will act as a perfect fallback for video on mobile devices. But since we have referred to video files in the html, they will get downloaded, though autoplay is disabled. To prevent this, we will have to remove the video source definitions from the markup. This could be achieved by modifying the source attribute from "src" to "data-src". Now since the source attribute doesn't confirms to proper source definition, the video will not get auto buffered. From Javascript we'll detect whether autoplay is supported and for positive matches we will copy the value from data-src attribute to src attribute. For video autoplay feature detection, I used Modernizr.

CMS

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.

Performance

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.

That's it..

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!