<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 ---------->
<!-- Both these should be added to within the <head> of your document-->
<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">
<div class="container ">
<!-- this is the background video, inside container div, and height set to 100% in CSS -->
<a id="bgndVideo" class="player"
data-property="{videoURL:'https://www.youtube.com/watch?v=YyOENdBj5kA',
containment:'body',
quality:'hd720',
autoPlay:true,
mute:true,
startAt: 6,
opacity: 1}">bg</a>
<!--more VIDO options at https://github.com/pupunzi/jquery.mb.YTPlayer/wiki -->
<div class="row">
<div class="col-lg-12">
<h1> Full Screen Video</h1>
<h3>Enjoy Adding Full Screen <img src="http://citynet.bg/citynet_files/web_favicons/Youtube-black-and-white-.png" alt=""> Videos</h3>
<!-- Begin Mr. M.'s Rows -->
<div class="row">
<div class="col-md-4">
<h2>Mr. M. Full Screen Video</h2>
<p>NOTE: <a href="http://bootsnipp.com/iframe/Ovmd" target="_blank">BEST to view Full Screen</a>. Non mi porta gravida at egetat eget metus. Fusce dapibus, tellus ac at eget cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta.. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
<div id="carouselButtons">
<button id="playButton" type="button" class="btn btn-default btn-xs" onclick="$('#bgndVideo').playYTP()">
<span class="glyphicon glyphicon-play" ></span>
</button>
<button id="pauseButton" type="button" class="btn btn-default btn-xs" onclick="$('#bgndVideo').pauseYTP()">
<span class="glyphicon glyphicon-pause"></span>
</button>
</div>
<button onclick="$('#bgndVideo').toggleVolume()">unmute/unmute</button>
<button onclick="$('#bgndVideo').pauseYTP()">pause</button><button onclick="$('#bgndVideo').playYTP()">play</button>
</div><!--/span-->
<div class="col-md-4">
<h2>Heading B</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-md-4">
<h2>Heading C</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
<!-- END Mr. M.'s Rows -->
</div>
</div>
</div>
</div>
</section>
<!--Video Section Ends Here-->
.container{
height:100%;
}
.col-md-4{
background-color:#D3D7E0;
opacity: 0.8;
margin-top:20px;
padding: 30px;
height:300px;
}
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.29);
padding: 110px 0 32px;
min-height: 1500px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .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;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
