HTML5 Video Backgrounds for jQuery

I’m not sure if I’m proud of the sentence I just typed for the title for this. I feel like that foreign guy who comments “Can I has teh codes?”. Anyways, I was browsing around on Whiteboard.is and saw they used video backgrounds for a bunch of their client sites. Thought the effect was neat, did some preliminary research, and threw together a quick jQuery plugin to do just that.

Just head on over to the jQuery.background Github page to grab it. Please be kind to your users and don’t overdo it. I used it on my home page, because I don’t care if it grabs people’s attention there. It would be a disgrace for you to use something like this where you expect your readers to actually read. Also: this will lower conversion rates, if that matters to you.

If you actually have some fun with this, do something interesting with it, find the glitches with the resize code, or have an awesome push report, please tweet me!

Tips

This effect doesn’t work for every video. I’ve found that it’s only worthwhile to implement for very steady, flowing videos with no foreground motion (it’s awkward to have people moving around, but a river is nice). I specifically created this plugin to use for footage I took while on a cross-country railway trip which flows absolutely perfectly for it.

There is advice for how to encode on the Github. Keep the files small. Ideally, your page shouldn’t be using more than 15% processor when the video is playing. It’s going to be tricky to find a good balance if you seriously want to do this. A video that can’t load fast enough is going to annoy your users to insanity.

While I joke about using this to “ruin the web,” I ask that you please don’t. Media is such a big part of interacting with information and making emotional appeals. That’s the dream for this. Please tweet me if you pull it off.