Fullscreen HTML5 Page Background Video

Fullscreen HTML5 Page Background Video

LAST UPDATED ON NOV 8, 2013   BY  NAEEM NOOR HTML

Fullscreen video background is possible with pure CSS/HTML5, there is no need for a framework. Check the snippet out.

CSS

   
   
   
   

    
    
    
    
video#bgvid {
    
    
    
    
position: fixed; right: 0; bottom: 0;
    
    
    
    
min-width: 100%; min-height: 100%;
    
    
    
    
width: auto; height: auto; z-index: -100;
    
    
    
    
background: url(polina.jpg) no-repeat;
    
    
    
    
background-size: cover;
    
    
    
    
}
   
   
   
   

HTML

   
   
   
   

    
    
    
    
<video autoplay loop poster="polina.jpg" id="bgvid">
    
    
    
    
<source src="polina.webm" type="video/webm">
    
    
    
    
<source src="polina.mp4" type="video/mp4">
    
    
    
    
</video>