<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 -->
<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 header">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch_popup?v=_JjKnvpgow4&vq=hd1080', containment:'.video-section', autoPlay:true, mute:true, opacity:0.76}">bg</a>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="bar">
<h1>Full Width Video</h1>
<h3>Enjoy Adding Full Width Videos to your Page Sections</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Video Section Ends Here-->
.pattern-overlay {
box-shadow: inset 0px 0px 100px rgba(0, 0, 20, 1);
background: -webkit-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%);
background: -moz-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -moz-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%);
min-height: 540px;
height : 100%;
}
.video-section h1, h3 {
margin: 80px auto 0px;
text-align:center;
color:#fff;
font-family: arial;
sans-serif;
}
.video-section h1 {
font-size:90px;
text-shadow: 1px 1px 1px #000;
font-weight:bold;
padding: 50px 0 0 0;
}
.video-section h3 {
padding: 0 0 50px 0;
}
.video-section .buttonBar {
display:none;
}
.video-section {
height: 540px;
width:100%;
overflow: hidden;
position: relative;
}
.player {
font-size: 1px;
}
.bar {
opacity: 0.6;
background: black;
margin-top: 2em;
}
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
