Full screen (background) video.

The brief: add a video background to the banner section on a Home page.

My first attempt used the good ol’ HTML5 <video> tag.  It worked a treat, on Chrome.  Nowhere else did this treat work.

HTML5 video is a wonderful thing, when embedding a play/window into a web-page.  Cross-platform issues are few and manageable.

Want to make the player window responsive?  Chris Coyier and Paravel have developed fitvid.js.  The scripts work like a charm on all platforms and across all mainstream browsers.

Need to see the video appear behind your page content?  George Paterson’s JQuery Background Video plugin takes the crown.  Its light-weight and works well across platforms, especially iPhone/iPad.

BigVideo is a stand-out choice, but it struggles on Apple’s mobile devices.  Two fantastic demonstrations and tutorials for integrating BigVideo are on GitHub (http://dfcb.github.io/BigVideo.js/) and Tympanus (http://tympanus.net/Tutorials/BigVideoSlideshow/).

My implementation for this client uses the ‘Paterson’ JQuery.  www.jonathandavid-jewellers.co.uk/patterson/

Despite GP’s brilliant code however, insurmountable problems with layout & aesthetics for this Homepage meant reverting to standard a rotating banner on touch devices.

Leave a Reply

Your email address will not be published. Required fields are marked *