Fullscreen Scaleable Video

HTML
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta name="description" content="Scalable Background Video" /> <title></title> </head> <body> <div class="video"> <video muted id="video_background" autoplay="autoplay" loop="loop"> <source src="http://www.wpwebos.com/streamline_small.mp4" type="video/mp4"> <source src="http://www.wpwebos.com/streamline2.ogv" type="video/ogg"> </video> </div> <div class="overlay"></div> </body> </html>
LESS
.inset{ -webkit-box-shadow: inset 0px 0px 10px 2px rgba(00, 00, 00, 6); box-shadow: inset 0px 0px 10px 2px rgba(00, 00, 00, 6); } /* {cursor: none;}*/ body{ background-color: #fff; margin: 0; padding: 0; height: 100%; width: 100%; } .video{ position: fixed; height: 100%; width: 100%; background-color: #000; #video_background { position: fixed; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden; } } .overlay{ position: fixed; height: 100%; width: 100%; background-color: #000; opacity: 0.8; } .main-container{ position: fixed; height: 100%; width: 100%; background-color:transparent; } .right{ float: right; height: 100%; width: 40%; .buttons{ float: right; width: 100%; height: 25%; background-color: rgba(23,23,23,0.8); .inset; } }
JAVASCRIPT
Expand for more options Login