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="https://staging.dieselpunkindustries.com/streamline_small.mp4" type="video/mp4">
<source src="https://staging.dieselpunkindustries.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;
}
}
