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

<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> <div id="navbar-main"> <!-- Fixed navbar --> <div class="navbar navbar-white navbar-fixed-top navver"> <div class="container"> <div class="navbar-header"> <img src="https://www.drycleaningconnection.com/wp-content/themes/DryCC/img/png/logo.png" height="30" /> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#home" class="smoothScroll">Home</a></li> <li> <a href="#about" class="smoothScroll"> About</a></li> <li> <a href="#services" class="smoothScroll"> Services</a></li> <li> <a href="#team" class="smoothScroll"> Team</a></li> <li> <a href="#portfolio" class="smoothScroll"> Portfolio</a></li> <li> <a href="#blog" class="smoothScroll"> Blog</a></li> <li> <a href="#contact" class="smoothScroll"> Contact</a></li> </div><!--/.nav-collapse --> </div> </div> <!--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=4D5Mn2QJVso',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a> <div class="container"> </div> </div> </section> <!--Video Section Ends Here--> <!-- ==== GREYWRAP ==== --> <div id="greywrap"> <div class="row"> <div class="col-md-12"><h2>Clients</h2></div> </div> <div class="row"> <div class="col-lg-3 callout"> <img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/> </div><!-- col-lg-4 --> <div class="col-lg-3 callout"> <img src="http://www.subway.com/core/images/topNavBar/subway-logo.png" class="img-grayscale" style="max-width:200px;"/> </div><!-- col-lg-4 --> <div class="col-lg-3 callout"> <img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/> </div><!-- col-lg-4 --> <div class="col-lg-3 callout"> <img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/> </div><!-- col-lg-4 --> </div><!-- row --> </div><!-- greywrap --> <!-- carousel --> <div class='row'> <div class='col-md-offset-1 col-md-10'> <div class="carousel slide" data-ride="carousel" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> </div> <!-- Carousel Buttons Next/Prev --> <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div> </div> </div> <!--next block--> <div class="about">Hello</div>
.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{ 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;} /* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; } /* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; font-size: 2.3em; text-shadow: none; margin-top: 30px; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 250px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } } /* Small devices (tablets, up to 768px) */ @media (max-width: 768px) { /* Make the indicators larger for easier clicking with fingers/thumb on mobile */ #quote-carousel .carousel-indicators { bottom: -20px !important; } #quote-carousel .carousel-indicators li { display: inline-block; margin: 0px 5px; width: 15px; height: 15px; } #quote-carousel .carousel-indicators li.active { margin: 0px 5px; width: 20px; height: 20px; } } /*graywrap*/ #greywrap { /*background: #f5f5f5;*/ /*background:#FC8C3F;*/ background:#0456A0; margin-top: 0px; padding-top: 40px; border-bottom: 1px solid #ddd; /*text-align: center;*/ color:#FFF; } #greywrap .callout { margin-bottom: 20px; } #greywrap p { margin-left: 30px; margin-right: 30px; letter-spacing: 1px; padding-top: 15px; padding-bottom: 15px; } #greywrap .icon { font-size: 60px; line-height: 30px; margin-bottom: 10px; } /*custom*/ .navbar-white{ background-color: #FFF; } .img-grayscale{ -webkit-filter: grayscale(100%); } .quotes{ } .about{ border-top: 1px solid #ddd; background:#FC8C3F; } .navver{ background:#0456A0; }
$(document).ready(function () { $(".player").mb_YTPlayer(); $('#quote-carousel').carousel({ pause: true, interval: 4000, }); });

Related: See More


Questions / Comments: