Fullsize background videos in webkit browsers

Note: As of writing the used Google Chrome version is 34.0.1847.116 m

Depending on the website you’re building, a fullsize background video can really add to the atmosphere. You’d think that the worst part will be to get it to work in IE, but alas that’s not the case. In fact in IE9+ this is as easy as pie, just like in Firefox or Opera, even though you need a different format than H264 for Opera (Theora or WebM).

The real show-stopper is actually webkit. Adding a video to the background of your page using the following css leads to quite some problems:

Note: The above gist does not deal with the problem of getting the video to actually cover the full screen, since the video will always maintain its aspect ratio.

After you’ve added your video to the background you will notice that as soon as you want to position any element using position:fixed, webkit will start to act up and the element will not stay in place, but rather scroll with the content and have rendering bugs. As mentioned in this stackoverflow.com post the solution for this is rather easy. Just add the following snippet to your elements with fixed positioning and they will behave properly again:

So far so good. Unfortunately, when trying to apply a fixed background image to a container, which is stacked above your background video, this background image will have rendering issues. To be more concrete: the image will not be displayed at all or only partially. And it looks really, really ugly. There is a fix for this, but it comes with its own tradeoff. When adding any overflow rule to your html and body tags, like overflow, overflow-x or overflow-y, webkit will display the background image properly.

There are two things which are now broken though. First of all, you cannot listen to the scroll event on the window object anymore. It won’t emit anything. Luckily this can be countered by adding a listener to the body element instead.

So that’s not that bad now, is it? Unfortunately it gets worse. By adding an overflow rule, webkit browsers will lose their ability to process body.scrollTop, so you’ll end up with something like this:

Oh and window.scrollTo() is broken too.

So all in all these are quite some tradeoffs to make a background video work in webkit. If you do not need to use scrollTop or scrollTo(), then using an overflow rule will surely solve your problem. If that is not an option, the following test might help to ease the pain, by detecting browsers, which are buggy with overflow-x and then add a class to the body so backgrounds can be handled differently:

Leave a Reply

*