youtube-vb.js

<script>
     
  // Youtube Video Background for Unbounce. V1.1
  
  // lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
  // Use '#lp-pom-root' for a full page video background
  lpVideoBG('#lp-pom-block-9', '2XX5zDThC3U', 560, 315, 0);

  function lpVideoBG(pageSectionID, youtubeVideoCode, videoWidth, videoHeight, muted) {

    var framedVideoDivID = 'framedVideo-' + pageSectionID.substr(1);

    var contentDivID = pageSectionID;
    var videoPosition = 'fixed';
  
    if (pageSectionID != '#lp-pom-root') {  
      contentDivID = pageSectionID + ' .lp-pom-block-content';
      videoPosition = 'absolute';
    }
      
    function resizeVideo() {
    
      var widthOfSection = $(pageSectionID).width(); 
      var heightOfSection = $(pageSectionID).height(); 
      
      if (pageSectionID == '#lp-pom-root') {  
        heightOfSection = $(window).height();
      }
      
      var newRatio = widthOfSection/videoWidth;
   
      //Obtain new height and vertical offset
      var newHeight = videoHeight * newRatio;
    
      //Size up video if less then section height
      if (newHeight <= heightOfSection) {
        var heightRatio = heightOfSection/newHeight;
        newHeight = heightOfSection * heightRatio;
       }
        
      //Adjust width based on new height
      var widthRatio = newHeight/videoHeight;
      var newWidth = videoWidth * widthRatio;
    
      var widthOffset = ((newWidth-widthOfSection) / 2);
      var heightOffset = ((newHeight-heightOfSection) / 2);
    
    
      //Offset and resize video
      $("#" + framedVideoDivID)[0].setAttribute("height", newHeight);
      $("#" + framedVideoDivID)[0].setAttribute("width", newWidth);
      $("#" + framedVideoDivID).css({ top: -heightOffset, left: -widthOffset, position:videoPosition });       
    }
    
    $(contentDivID).css({"width":"100%", "margin-left":"0", "overflow":"hidden"});
    
    $(contentDivID).append('<div style="height:100%;width:100%;position:absolute; top:0px"><iframe id="' + framedVideoDivID + '" width="100%" height="100%" src="//www.youtube.com/embed/' + youtubeVideoCode + '?autoplay=1&controls=0&iv_load_policy=3&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&showinfo=0&playlist=' + youtubeVideoCode + '&enablejsapi=1" frameborder="0" allowfullscreen style="display:block; visibility:hidden; "></iframe></div>');
    
    $(contentDivID).append('<div style="height:100%;width:100%;position:absolute; top:0px"></div>');
  
    resizeVideo();
  
    $( window ).resize(function() {
      resizeVideo();
    }); 
    
    
    //Append events to existing Youtube JS functions
    var originalOnPlayerReady = onPlayerReady;
    onPlayerReady = function(event) {
      originalOnPlayerReady(event);
      if (muted == 1) {
        event.target.mute();
      }
    };
      
    var originalOnPlayerStateChange = onChangedState;
    onChangedState = function(event) {
      originalOnPlayerStateChange(event);
      if (event.data == YT.PlayerState.PLAYING) {
        document.getElementById(framedVideoDivID).style.visibility = 'visible';
      }
    };
      
    var player;
    var originalYouTubeReady = onYouTubeIframeAPIReady;
    onYouTubeIframeAPIReady = function() {
      originalYouTubeReady();
      player = new YT.Player(framedVideoDivID, {
        loop: '1',
        events: {  
          'onReady': onPlayerReady, 
          'onStateChange': onChangedState
        }
      });
    };
  }

  //Load up Youtube Javascript API
  var tag = document.createElement('script');

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

  function onYouTubeIframeAPIReady() {
  }
  
  function onPlayerReady(event) { 
  }

  function onChangedState(event) {
  }  
 
</script>