"Full Width Screen Video Background"
Bootstrap 3.3.0 Snippet by drinceanuro

<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 ----------> <!-- Warming Up --> <link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'> <script src="http://pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script> <!--Video Section--> <section class="content-section video-section"> <div class="pattern-overlay"> <a id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/Z-Wv01zvd1E',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1></h1> <h3></h3> </div> </div> </div> </div> </section> <!--Video Section Ends Here-->
.video-section .pattern-overlay { background-color: transparent; padding: 110px 0 32px; min-height: 496px; /* Incase of overlay problems just increase the min-height*/ } .video-section h1, .video-section h3{ text-align:center; color: transparent; } .video-section h1{ font-size:110px; font-family: 'Buenard', serif; font-weight:bold; text-transform: uppercase; margin: 40px auto 0px; text-shadow: 1px 1px 1px #000; -webkit-text-shadow: 1px 1px 1px #000; -moz-text-shadow: 1px 1px 1px #000; } .video-section h3{ font-size: 25px; font-weight:lighter; margin: 0px auto 15px; } .video-section .buttonBar{display:none;} .player {font-size: 1px;}
$(document).ready(function () { $(".player").mb_YTPlayer(); });

Related: See More


Questions / Comments: