<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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://www.youtube.com/watch?v=e8DFN3m8XGQ',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a> <div class="container"> <div class="row"> <div class="jumbotron"> <h1>Ładnie tu, prawda?</h1> <p>Twoja strona straszy? Wejdź ze swoja witryną w 21 wiek i pokaż, że miejsce antyków jest w muzeum, a nie pod Twoim adresem! </p> <p><a class="btn btn-warning btn-lg" href="#" role="button">Oferta <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></a></p> </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 h1, .video-section h3{ text-align:center; color:#fff; } .video-section h1{ 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;} .jumbotron { background: rgb(255, 255, 255); /* This is for ie8 and below */ background: rgba(255, 255, 255, 0.3); }

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