Youtube Video Background for Unbounce pages

youtube-vb.js

<script>
     
  // Youtube Video Background for Unbounce. V1.3.5
  
  // lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
  // Use '#lp-pom-root' for a full page video background
  lpVideoBG('#lp-pom-block-9', 'vLUNWYt3q1w', 560, 315, 0);
 
  function lpVideoBG(pageSectionID, youtubeVideoCode, videoWidth, videoHeight, muted) {
    var onMobile = navigator.userAgent.match(/(Android|iPod|iPhone|iPad|iemobile|blackberry)/);
    
    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"});
    
    var displayAttr = 'block';
    
    if (onMobile) {
      displayAttr = 'none';
    }
    
    var iframeDiv = '<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:' + displayAttr + '; visibility:hidden; "></iframe></div>';
    var overlayDiv = '<div style="height:100%;width:100%;position:absolute; top:0px"></div>';
    
    if (pageSectionID === '#lp-pom-root') {
      $(contentDivID).prepend(overlayDiv);
      $(contentDivID).prepend(iframeDiv);
    } else {
      $(contentDivID).append(iframeDiv);
      $(contentDivID).append(overlayDiv);
      $(pageSectionID + '-color-overlay').appendTo(contentDivID);
    }
    
    resizeVideo();
  
    $( window ).resize(function() {
      resizeVideo();
    }); 
    
    
    //Append events to existing Youtube JS functions
    var originalOnPlayerReady = onPlayerReady;
    onPlayerReady = function(event) {
      originalOnPlayerReady(event);
      player.setLoop(true);
      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';
      } else if (event.data == YT.PlayerState.ENDED) {
        document.getElementById(framedVideoDivID).style.visibility = 'hidden';
      }
    };
      
    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>