"TEST: Full Screen Video"
Bootstrap 3.3.0 Snippet by harunpehlivan

<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 id="video-wrapper" class="video-wrapper"> http://codepen.io/klas/pen/sKJAB <video autoplay loop id="bgvid"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunxxxny.webm" type="video/webm"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> </video> </div> <div class="content"> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> <article> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iure ipsum eveniet, at ratione a corporis molestiae minima impedit voluptatem quia aspernatur quibusdam, deleniti atque culpa. Ducimus excepturi, voluptas odio!</p> </article> </div>
html, body { width: 100%; height: 100%; margin: 0; font-family: 'sans-serif'; color: white; line-height: 1.3em; } article { margin: 10px 0; background: rgba(0,0,0,0.7); padding: 4px 20px; } .video-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index:-1; } .video-wrapper video { position: fixed; top: 0; right: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; } .content { position: relative; margin: 60px auto; width: 80%; max-width: 640px; z-index: 1; }

Related: See More


Questions / Comments: