<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 ----------> <section class="video v-center" style="height: 800px; background-position: 50% 58px;"> <div id="bgVideo" class="background" style="height: 800px;"><video id="video_background" preload="auto" autoplay="autoplay" loop="loop" style="position: fixed; top: -203px; left: 0px; bottom: 0px; right: 0px; z-index: -100; width: 1422px; height: 799.875px;"><source src="http://www.appsburner.com/video/preview.mp4" type="video/mp4"><source src="http://www.appsburner.com/video/preview.webm" type="video/webm">bgvideo</video></div> <div> <div class="container"> <div class="hero-unit"> <h2>App Builder</h2> <h4 class="subtitle">Start building your own app for FREE!</h4> <a style="margin-top:16px;" class="btn btn-large btn-primary" href="http://www.appsburner.com/login.php" target="_blank">Build Your App</a> </div> </div> </div> </section> </section>

section.video { position: relative; height: 800px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: white; } .video.v-center, .video .v-center { display: table; width: 100%; } .video .hero-unit { text-align: center; padding: 0; margin: 0; background-color: transparent; } .video .container { position: relative; z-index: 2; } section * { z-index: 2; } section { font-weight:100; margin:85px 0; } section.video { position:relative; height:800px; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; color:#FFF; } video { left: 0px; bottom: 0px; right: 0px; z-index: -100; width: 1422px; height: 799.875px; } .video #bgVideo { overflow: hidden; } .video #bgVideo > video { position: absolute !important; top: 0 !important; } .video > div, .video .v-center > div { display: table-cell; vertical-align: middle; margin-top: 0; margin-bottom: 0; float: none; } .background { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: 50% 50% no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }