Ditch Your Boring Masthead for an HTML5 Video Background

This was my first venture into HTML5 video backgrounds and I have to admit both me and my client were impressed.  These backgrounds are a simple, yet effective technique I would recommend other front end web developers try for themselves.

An HTML5 video background is an ideal alternative to traditional masthead website graphics


Screen Shot of Stem Cell Centers of America Website
Screenshot of a HTML5 Video Background effect created for Stem Cell Centers of America

Visit Website

The site above was created for a medical clinic based out of Boca Raton, Florida called Stem Cell Centers of America. When we met to discuss the design concept, they showed me some of their competitor sites and my overall thought was that they were all very cookie-cutter, predicable designs – most featuring a large image of a smiling doctor with a team of nurses and medical practitioners behind him. Two even used the same stock photo below:

Common image of smiling doctor

If I had $100 for every time I’ve seen that image, but I digress…

Keep in mind, a video background approach won’t work for every site. But with the right video, for the right industry it can have a very nice impact. It is attention grabbing plus it will give the developer full html control for what ultimately gets layered over the video.

In my case I added a simple call to action button to drive the visitor to a contact form to see if they are a candidate for stem cell therapy treatment.

Video Selection Tips

Choosing the right video is obviously key and definitely take your time when researching and selecting it. I found the video of the doctor holding the ipad on istockphoto.com – which besides having a ton of stock photos also has great background videos you can browse through.

Also Consider

1) Pick a video that is relatively still with little movement.

You will want the call to action to be the focus point and not have something too busy going on in the background.

2) Add some javascript to detect the type of browser and display the appropriate video format.

I used a jquery video player called video.js.  This component helped me detect the browser the end user is watching from and then played the appropriate file format.  For instance, .mp4 videos should be your priority and used by default, but you will also want to convert your video to  what about you will also want to make sure you convert the video to .webm and .ogv (good for Firefox, Chrome and Safari)

Related Resources