Background Youtube Video

background-youtube-video.markdown

Background Youtube Video

Not so smooth. :-(

A Pen by Janne Leppänen on CodePen.

License.

index.html

<header class="site-header">
  <iframe id="yt-player" src="https://www.youtube.com/embed/iApVVKsF94E?autoplay=1&modestbranding=1&controls=0&showinfo=0&rel=0&enablejsapi=1&version=3&loop=0&playerapiid=ytplayer&allowfullscreen=true&wmode=transparent&iv_load_policy=3&html5=1&playlist=iApVVKsF94E&disablekb=true" frameborder="0"></iframe>
  <div class="video-overlay"></div>
  <div class="content">
    <h1>Header Title</h1>
  </div>
</header>
<div class="site-content">
  <h1>This is site content</h1>
</div>

script.js

$(window).on('resize load', function() {
  $('.site-header iframe').each(function() {
    var self = $(this);
    var container = self.parent();

   self.css({
      width: container.width() + "px",
      height: container.width() * (9/16) + 'px',
      position: 'absolute',
      marginTop: -container.width() * (9/32) + 'px',
      top: '50%'
    });
  });
});


// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('yt-player', {
      autoplay : 1,
      videoId: 'yZM5VAKi5vU',
      playerVars : {
        'autoplay' : 1,
        'rel' : 0,
        'showinfo' : 0,
        'showsearch' : 0,
        'controls' : 0,
        'loop' : 1,
        'enablejsapi' : 1,
        'playlist': 'yZM5VAKi5vU'
      },
      events: {
      	"onReady": onPlayerReady,
      	//"onStateChange": onPlayerStateChange
 			}
	});
}

function onPlayerReady(event) {
	event.target.mute();
  event.target.playVideo();
}

function onPlayerStateChange(event) {        
	var id = 'yZM5VAKi5vU';

    if(event.data === YT.PlayerState.ENDED){
        player.loadVideoById(id);
    }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>

style.less

@import "lesshat";

.site-header {
  background: #222;
  overflow: hidden;
  position: relative;
}
.video-overlay {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: #000;
  opacity: 0.5;
}
.site-header .content {
  position: relative;
  z-index: 100;
  text-align: center;
  padding: 50px 0;
  color: #fff;
  font-size: 48px;
  text-shadow: 0 0 10px rgba(0,0,0,0.2);
  text-transform: uppercase;
}

.site-content {
  padding: 40px 0;
  text-align: center;
}