How To Make Video Backgrounds Using HTML5
Video background are hecka cool. I’ve used them a couple of times, in the blog section of avizuber.com and in LaunchRocket (a free Bootstrap template). I’m also a big fan of how Zendesk makes use of video backgrounds. There are a few difference ways to make this happen, I’m going to focus on the HTML5 method.
HTML5 has a nifty tag called <video> which – wait for it – allows you to play videos! Here it is in action:
<video autoplay loop poster=”img/bg.png” id=”bgvid”>
<source src=”vid/bg.webm” type=”video/webm”>
<source src=”vid/bg.mp4″ type=”video/mp4″>
<source src=”vid/bg.ogg” type=”video/ogg”/>
There are a few important things to note:
- There are three different video formats: .webm, .mp4 and .ogg. This is because not every video format works with every browser and/or device. Putting all three formats up raises the chances of your video being rendered correctly. I wrote about file conversions here.
- The “poster” attribute is your friend. According to the fine folks at JWPlayer 80% of the web supports HTML5 videos, but you still have 20% to worry about. Poster will display an image in place of a faulty video when needed. (Built in fallbacks FTW.) Read more about computability with HTML5 on CanIUse.
- You’ll need to use CSS to get that video tag to play in the background. Not id=”bgvid” in the opening video tag. That links to the css below:
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(../img/bg.png) no-repeat;
A quick glance at Zendesk’s code reveals that they’re using a service called Wistia for their video background. It’s hard to believe that at a great tech company like Zendesk, nobody there would have thought to use our handy-dandy HTML5 tags. So why use a premium service? My assumption (meaning, my guess, so don’t take this as fact) is that Wistia has a) great video hosting and b) better fallbacks for that “20%” who do not yet support the tag. For projects like LaunchRocket, an image is a good enough fallback for me. For popular companies like Zendesk, they might want to do everything in their power to keep the video up and running, hence the use of Wistia.
UPDATE: After getting to see the insides of Wistia a bit, it turns out they offer far more than just a video background. They add a level of user interaction to their videos (like a call to action or an email subscription widget) similar to ViewBix (but with a subjectivly nicer UI). Definitely worth checking out for websites that require conversions.