<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 ----------> <!-- Ref: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video --> <div class="container"> <div id="page"> <h2>Test Full Screen Vid</h2> <a href="http://bootsnipp.com/iframe/7QQ62" target="_blank">full screen</a> <h1>Here is some Text</h1> <div class="row"> </div> </div> </div> <video class="visible-sm visible-md visible-lg" " autoplay muted loop poster="http://i.imgur.com/yyPiKFD.jpg" id="bgvid"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> </video> <div class="visible-xs"> <img src="http://i.imgur.com/ds01Rcv.jpg" alt="" class="img-responsive img-rounded center-block"> <p class="text-center btn-success"> Extra small devices Phones (<768px) </p> </div>

html, body { height:100%; color:#ccc; } *{ margin:0; padding:0; } video { display: block; } video#bgvid { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(polina.jpg) no-repeat; background-size: cover; } #page { position:absolute; top:0; right:0 z-index:1; width:50%; height:100%; background:rgba(0,0,0,.5); } @media screen and (max-device-width: 800px) { html { background: url(http://i.imgur.com/yyPiKFD.jpg) #000 no-repeat center center fixed; } #bgvid { display: none; } }