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.
GoalsThe 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.