This is the javascript code for the Invodo Test
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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment