<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 ----------> <!-- *Legend - You must change src in video > source if you want watch video - If source in src is not found lunched is image in video attribute poster --> <div class="fullscreen"> <video playsinline autoplay loop muted poster="http://rynko.pl/wp-content/uploads/2013/07/Twitter-Bootstrap-Tutorials.png" class="fullscreen-video"> <source src="./video/video.mp4" type="video/mp4" /> </video> </div>

.fullscreen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .fullscreen-video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen-video { width: 300%; left: -100%; } } @media (max-width: 767px) { .fullscreen { background: url('image href') center center; } .fullscreen-video { display: none; } }