Full size video with YouTube iFrame Player

Twitter Bootstrap + YouTube iFrame Player API

by fredd man

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="pemcarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#pemcarousel" data-slide-to="0" class="active"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <div class="video-content">
        <div class="banner-video">
          <div id="player"></div>
        </div>
      </div>
      <div class="carousel-caption">
        <div class="jumbotron">
          <h2>Innovative & sustainable</h2>
          <h1>Lithium Extraction</h1>
          <div class="carousel-lead">Can we find better & cleaner ways to process the lithium needed for the energy storage revolution we’re witnessing? <span>We believe the answer is YES.</span></div>
        </div>
      </div>
      <!-- caption -->
    </div>
  </div>
  <!-- carousel-inner -->
</div>

CSS

.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.item .carousel-caption .jumbotron {
  background-color: transparent;
}

.carousel-caption {
  top: 37%;
  text-shadow: none;
  z-index: 101;
}

.item .carousel-caption .jumbotron h2 {
  font-size: 20px;
  font-family: sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  color: #03475d;
}

.item .carousel-caption .jumbotron h1 {
  font-size: 68px;
  font-family: sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  color: #fff;
}

.item .carousel-caption .jumbotron .carousel-lead {
  font-size: 18px;
  font-family: sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #03475d;
}

.video-content {
  float: left;
  height: 100%;
  position: relative;
  width: 100%;
  /*     z-index: 999; */
}

.banner-video {
  height: 100%;
  opacity: 1;
  position: relative;
  transition: all 0.5s ease 0s;
  width: 100%;
  /*     z-index: 99; */
}

.banner-video iframe {
  height: 150%;
  left: -25%;
  max-height: 500%;
  max-width: 500%;
  position: absolute;
  top: -25%;
  width: 150%;
}

.bg-black-banner {
  background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

JavaScript

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//  This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    fitToBackground: true,
    videoId: 'Nbedk6AnulQ',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'autohide': 1,
      'enablejsapi': 1,
      'loop': 1,
      'disablekb': 1,
      'fs': 0,
      'modestbranding': 0,
      'showinfo': 0,
      'color': 'white',
      'theme': 'light',
      'rel': 0,
      'playlist': 'Nbedk6AnulQ'
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//  The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
  player.mute();
  player.setVolume(0);
  player.setLoop(true);
  player.setPlaybackQuality('hd1080');
}

//  
function onPlayerStateChange(event) {}

/*-------------------------------------------------------------------*/
/*  Video Carousel. Requires Twitter Bootstrap
/*-------------------------------------------------------------------*/

var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');

$(window).on('resize', function() {
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel').carousel({
  interval: 0
});