This is the javascript code for the Invodo Test

Invodo-Test.js

Invodo.init({
  pageName: "Implementation Demo",
  pageType: "other",
  onload: function() {
    window.onresize = function() {
      videoResize(); 
    };
    
    videoResize(); 
    
    Invodo.Widget.add({
      widgetId: "player1",
      type: "inplayer",
      mode: "embedded",
      parentDomId:"videoContainer",
      refId: "ProductionHeader1"
    });
    
    Invodo.Widget.add({
      widgetId: "player2",
      type: "inplayer",
      mode: "embedded",
      parentDomId:"videoContainer2",
      refId: "invodoset"
    });

    Invodo.Widget.add({
      widgetId: "newWidget1",
      type: "inplayer",
      mode: "overlay",
      parentDomId:"overlayContainer",
      refId: "sizzlereelq32013",
      listensTo: "cta1"
    });
    
    Invodo.Widget.add({
      widgetId:"cta1", 
      type:"cta", 
      refId:"sizzlereelq32013",     
      parentDomId:"overlayContainer", 
      data:"https://s-media-cache-ak0.pinimg.com/favicons/68966558788745598cc93a922cf590c4512e1a261ce07ea8bb27b8e5.png?788975ac7060e62be226e0044ddf3aeb"
    });
  }
});

window.addEventListener("load", function(){
  var playStart = Invodo.Widget.get('player2');
  playStart.registerEventListener('videoStart', playBack);
});

function playBack() {
 console.log('Video playback has begun.');
}

function videoResize() {
  var containerArray = []; 
  containerArray = document.getElementsByClassName('embedded');
   for(var i = 0; i < containerArray.length; i++) {
    var newWidth = containerArray[i].clientWidth;
    var newHeight = newWidth * 0.5625; 
    containerArray[i].style.height = newHeight + "px";     
   }
 }

/*
   Don't worry about anything below here.
   I was getting a little cute with CSS experiments.
   All it does is hide the footer banner so it doesn't overlay the middle video.
*/

function getVidPosition(el) {
  var coords = {
    top: el.offsetTop,
    bottom: el.offsetTop + el.scrollHeight
  };
  
  var parent = el.parentNode;
  do {
    var parentStyles = getComputedStyle(parent);
    if(parentStyles) {
     
     var parentTop = parent.offsetTop - parent.scrollTop + parseInt(parentStyles.getPropertyValue("border-top-width"));
     coords.top += parentTop;   
     coords.bottom = coords.top + el.scrollHeight;
     parent = parentStyles.getPropertyValue("position") === "fixed" ? null : parent.parentNode;
      
    }
    else parent = parent.parentNode;
  } while (parent && parent.nodeName.toLowerCase() !== "html");
  
  return coords;

}

function showHideFooter() {
  vid = document.getElementById("videoContainer");
  vid.coords = getVidPosition(vid);
  foot = document.getElementById("footer");
  foot.props = getComputedStyle(foot);
  foot.coords = {
    top: window.innerHeight - parseInt(foot.props.getPropertyValue("height"))  
  };
  if(foot.props.getPropertyValue("display") == "block") {
    if(vid.coords.top <= foot.coords.top && vid.coords.bottom > foot.coords.top) {
      foot.style.display = "none";
    }
  }
  else {
    if(vid.coords.top > window.innerHeight || foot.coords.top > vid.coords.bottom) {
      foot.style.display = "block";
    }
  }
}

window.addEventListener("load",function() {
  document.body.onscroll = showHideFooter;
  window.addEventListener("resize",function(){
    showHideFooter();
  });
  showHideFooter();
});