<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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://www.youtube.com/watch?v=5rgP3JZD_Wo',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2 class="text-center">MORS Video AD Demo</h2> <h3>Enjoy Adding Full Screen Videos to your Page Sections</h3> <div id="container"style="z-index:11111;background:#FFF;width:1020px;height=100%;"></div> </div> </div> </div> </div> </section> <!--Video Section Ends Here-->

.video-section .pattern-overlay { background-color: rgba(71, 71, 71, 0.59); padding: 110px 0 32px; min-height: 496px; /* Incase of overlay problems just increase the min-height*/ } .video-section h2, .video-section h3{ text-align:center; color:#fff; } .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; } #container{ position:absolute; top:200px;} .video-section .pattern-overlay { background-color: rgba(180, 180, 180, 0.59); padding: 110px 0 32px; min-height: 400px; height: 109%!important; width: 90%; position: absolute; left: 5%; text-align: left!important; } .video-section .buttonBar{display:none;} .player {font-size: 1px;} #mbYTP_bgndVideo { margin-top: 0px!important; }.pattern-overlay { background: url('http://f.cl.ly/items/0A0q3D3a270G2z190V1C/Screen%20Shot%202014-02-16%20at%208.46.23%20AM.png'); background-repeat: no-repeat; background-position: 20px 3%; } .video-section .pattern-overlay { background-color: transparent!important; padding: 110px 0 32px; min-height: 400px; height: 109%!important; width: 83%; position: absolute; left: 9%; text-align: left!important; }

$(document).ready(function () { $(".player").mb_YTPlayer(); });