<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="videocontainer"> <video autoplay loop muted poster="screenshot.jpg" id="background"> <source src="https://bufiles.blob.core.windows.net/co3615/video/explore.webm"> </video> <h1 style="color: white; font-size: 5em; text-align: center; top:36%; left: 40%; position: fixed; z-index: -99; font-family: serif;">MENU</H1> </div>

#background { height: 25vh; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url("https://bufiles.blob.core.windows.net/co3615/slide/overlay.png") left center; background-size: cover; } .container h1 { color: white; } .videocontainer { height: 35vh; }