Web pages with full window video backgrounds ... almost possible

Gibbs tries to build a web site with full browser window video and it works, just not reliably or everywhere

Friends of mine are in the process opening a "vapor bar" in Ventura. If you haven't come across this concept it's like a wine bar where aficionados of electronic vaporizers (also called electronic cigarettes) can go to sample what are called "e-liquids" or "e-juice." These e-liquids are a mixture of propylene glycol (PG), vegetable glycerin (VG), and optionally nicotine along with flavorings which make the taste like traditional tobacco flavors or more novel ones such as bubble gum and chocolate. 

While the e-cig technology, which today is mostly based on vaporizing the fluid mixture using an electrically heated coil, was originally invented to be a much safer substitute for smoking tobacco there's now a whole culture that's grown up around "vaping." It's become a huge and rapidly growing business with sales of e-cigs growing from an estimated 50,000 in 2008 to 3.5 million in 2012.

So, I'm helping my friends build their web site and I had this idea: The business is to be called "Ventura Vapors" so what if the web site had a fit-to-fill video in the browser window showing moving vapor behind their content? That would make for a very cool looking site and it gave me a reason to try out an open source JavaScript library called BigVideo.js.

BigVideo.js requires Video.js, an open source HTML5 video player, and also relies on jQuery (a foundational JavaScript library), jQuery UI ("a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery"), and the jQuery imagesloaded plugin. Optionally you can also use the Modernizer library to detect which HTML5 and CSS3 features are available on a browser whick allows you to accommodate mobile devices that do not allow videos to be automatically played.

If you try using BigVideo.js, be warned; you'll need to look very carefully at bigvideo.css and you'll most likely have to tweak it and any other CSS you use to get your content layout to display correctly.

You'll also need to create or acquire the videos to be used. These need to be in MP4 format and are best kept short to minimize load time unless you're going to use a good content delivery network. The author of BigVideo.js, John Polacek, suggests getting a Vimeo Pro account ($199 per year) which allows you to use video stored on their servers and CDN without having to use the Vimeo player. And if you want to support the Firefox browser you'll also need to create an Ogg Theora or WebM version of your video so that Firefox can play it.

Usually videos you'll find you like will be in the wrong format and or wrong size. For conversions to MP4 format and resizing I'd usually resort to using HandBrake, a free, open source tool available for Windows, OS X, and Linux that can convert most video formats reliably. Unfortunately Handbrake doesn't handle Ogg Theora format so I wound up  using another free, open source tool, Miro Video Converter (also available for Windows, OS X, and Linux), which converts virtually any video file to MP4, Ogg Theora, or WebM. What I really like about Miro is its very clean user interface and presets for various target devices including Apple TV, iPhones, iPods, and iPads. It also does batch conversion and custom resizing.

Anyway, my final code looked like this:

    <script>
       	$(function() {
       		var BV = new $.BigVideo({useFlashForFirefox:false});
       		BV.init();
        	if (Modernizr.touch) {
            	       BV.show('img/SmokeStill.jpg');
        	} else {
            	       BV.show('vids/SmokeLoopSlow2.mp4',
                                   {altSource:'vids/SmokeLoopSlow2.ogv', 
                                     ambient:true});
        	}
           });
    </script>

The useFlashForFirefox key prevents Firefox using Flash to play video will be problematic if you plan to get fancy and mix any Flash content with the BigVideo.js content ... although that does seem like an unlikely combo. 

The first use of BV.show is invoked only if the call to Modernizer to see if the device has a touchscreen returns true. If it does, then a static image is displayed. The second use of BV.show is only invoked when Modernizer returns false and this one specifies the MP4 video to play with the altSource key specifying the Ogg Theora file to use for Firefox. Finally, the ambient key specifies that the video should be looped without sound.

My Ogg Theora format video came out looking much  "blockier" than the MP4 version due to over-compression. If I were to eventually use the BigVideo.js page for the final site I would change or edit the videos for something slowed down to get a more, dare I say, "languorous" effect with better reslution for the Ogg Theora version.

Side note: Make sure your ISP has added the required MIME types (.mp4 as 'video/mp4' and .ogv as 'video/ogg') to your server configuration otherwise you will spend ages trying to figure out why the videos aren't working ... yes, one of my hosting providers, EasyCGI, doesn't have IIS configured with those MIME types by default which makes no sense. Oh, and their Control Panel File Manager won't allow you to upload .ogv files for no fathomable reason either. It may be time to move to another hosting provider.

You can find my test page here.

So far I've tried the site under Chrome (29.0.1547.65), Safari (6.0.5), and Firefox (23.0.1) on OS X 10.8.4 on an iMac and Firefox (23.0.1) and IE 9 on Vista and the results were very good although, as expected, the Firefox version looked rather "blocky". IE 9, of course, was the only browser that screwed up the CSS and instead of centering the logo in the middle of the screen slammed it up against the top edge (thanks, Microsoft)

To see what would happen with other browsers on other operating systems I asked a group of friends to check the test page out and, well, the end results were disappointing. On some of the same combinations I had tried other people found the video stuttered and occasionally stopped. With Chrome 29.0.1547.72 on a Nexus 7, 4.3 under Android 4.3 the smoke flowed sideways! Then it would apparently freeze for nearly a minute, unlock, and freeze again! Another disappointing report was for Opera 12.16 and Opera 9.80  on OS X 10.7.5 which showed no video at all.

My conclusion is that as cool and fun as BigVideo.js is, the ridiculous variation in what browsers can support due to the currently almost insurmountable obstacles of lack of specificity in standards, the platform variations, possible interference from browser plugins, and vendors being willfully non-compliant (I'm looking at you, Microsoft) means there's simply no way I can use it. When BigVideo.js works it is spectacular but I think I'm going to have to go with something far more simple.

If you have any suggestions as to how to get the effect I'm looking for or how to get better stability out of BigVideo.js, please let me know below or at gearhead@gibbs.com 

Follow Gibbs on TwitterApp.net, and Facebook.

To comment on this article and other Network World content, visit our Facebook page or our Twitter stream.
Related:
Must read: Hidden Cause of Slow Internet and how to fix it
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.