Tag Archives: web design

HTML5 Full Screen Video Backgrounds

I was ahead of the curve on using HTML5 full screen videos.  I am starting to see them everywhere now.  I was not the first to use them, but I applied it to my companies public facing web site (www.jonasfitness.com) Feb of 2014.  Now I see it on Paypal, Spotify and a on quite a few other sites as well.

When I designed it for our site, I used various CSS3 attributes.  The downside to that is browser availability.  To maintain graceful degradation on older browsers, the CSS will display a full screen background image in place of a video.   In addition, the videos we used were hosted on our site which was in turn a shared hosting environment.  This affects speed of loading a large video necessary to cover a screen.  On average, the file sizes were 5-8Mb.

I recently came across an article at Designmodo (http://designmodo.com/video-background-website/) which is one of my favorite design shops.  (I have purchased and used their Flat UI framework and it is very well made and worth the money).  The article shows you how to achieve full screen video while using Youtube as the host.  This had never dawned on me but makes a lot of sense.  Youtube servers are much higher end and can load video faster than a shared hosting environment.

Anyways, if you have always wanted to try a full screen HTML5 video background I recommend this route.  Good luck!

Examples of HTML5 Full screen video backgrounds

Paypal – https://www.paypal.com/home

Designmodo Startup Framework – http://designmodo.com/startup/