How can you display HTML5 <video>
as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
How can you display HTML5 <video>
as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Add webm and ogg sources to support more browsers)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.