Forget large background image for your web site. Now, comes video time.
So you want to put a nice video as background of your site but don’t know how to do ? “Fear you must not” said Yoda as it’s really simple.
First, have a look at the effect in action . Nice, isn’t it ?
First thing first, the html :
<video src="your-video.mp4"></video<
<div> your fantastic text here </div>
Now, the css magic :
video {
z-index: -999;
position: fixed;
min-height: 100%;
min-width: 100%;
}
The z-index indicates that the video layer is in the background. Everything with a higher index will appear above.
The position fixed is mandatory, to make sure the overlay plays well.
Finally, ensure that the video dimension takes all space available, with the min height and width tags to 100%.
If you would like to have your text centered horizontally and vertically, just add this css :
html, body { width: 100%; height: 100%; }
body {display:table;}
div {display: table-cell; vertical-align: middle; text-align: center;}
And that’s all !
This method works on all major browser : I tested it on Firefox, Chrome and Safari. It also works unmodified on IE9 !