Video Background Header

A customer asked us recently to design their webpage and they were very certain they wanted a "Video background like AirBnb has". I searched the net a bit and found several sources of info, some of which were quite different, and some of which were straight out contradictory. After fiddling for several hours with all the different ideas presented, I settled on something that I found met most of my requirements. Here I present a boilerplate which you can customize to create your own video background header.

Goals

The short and curly of it is that I wanted a CSS/HTML combination that gave me a video background over which I could lay any other HTML and style them.

• The video should auto play as the page loads.
• The video should always fill and cover the element it is a background for, vertical and horizontal device profiles alike.
• If loading the video is slow or fails, then a placeholder image should be ready in it's place.
• The video and layout above it should render as expected on as many devices and platforms possible.

Demo on CodePen

In my pen I did not want to link to any other offsite resources, so I inlined and compressed the video in JS. I would advise anyone else to rather render the appropriate static HTML (provided but commented out) that points to actual video files that can be optimised themselves.

See the Pen Video Background Boilerplate by Pat Cullen (@patcullen) on CodePen.