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.
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:
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
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)