Can you display HTML5 <video> as a full screen background?

Question

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

Answer 1

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.

Answer 2

I might be a bit late to answer this but this will be useful for new people looking for this answer.

The answers above are good, but to have a perfect video background you have to check at the aspect ratio as the video might cut or the canvas around get deformed when resizing the screen or using it on different screen sizes.

I got into this issue not long ago and I found the solution using media queries.

Here is a tutorial that I wrote on how to create a Fullscreen Video Background with only CSS

I will add the code here as well:

HTML:

<div class="videoBgWrapper">     <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">         <source src="videosfolder/video.webm" type="video/webm">         <source src="videosfolder/video.mp4" type="video/mp4">         <source src="videosfolder/video.ogv" type="video/ogg">     </video> </div> 

CSS:

.videoBgWrapper {     position: fixed;     top: 0;     right: 0;     bottom: 0;     left: 0;     overflow: hidden;     z-index: -100; } .videoBg{     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%; }  @media (min-aspect-ratio: 16/9) {   .videoBg{     width: 100%;     height: auto;   } } @media (max-aspect-ratio: 16/9) {   .videoBg {     width: auto;     height: 100%;   } } 

I hope you find it useful.