Hi, I have two colorbox popup boxes which show a youtube video in each. When they're finished playing, I'm trying to have them automatically close the colorbox window. This code below works perfect in firefox, but in IE I can't get addEventListener to work. I've tried attachEvent with no success. Can anybody offer any suggestions as to how to solve this? It seems simple but I'm exhausted trying to find a solution. By the way, this is my first time as stackoverflow and it's very impressive.
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer1" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO1&rel=0&hl=en_US&fs=0&autoplay=1&enablejsapi=1&playerapiid=ytvideo1", "popupVideoContainer1", "640", "385", "8", null, null, params, atts);
var params2 = { allowScriptAccess: "always" };
var atts2 = { id: "ytplayer2" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO2&rel=0&hl=en_US&fs=0&autoplay=1&enablejsapi=1&playerapiid=ytvideo2", "popupVideoContainer2", "640", "385", "8", null, null, params2, atts2);
function onYouTubePlayerReady(playerId) {
if(playerId == 'ytvideo1'){
var ytplayer = document.getElementById('ytplayer1');
ytplayer.addEventListener("onStateChange", "onytplayerStateChange", false);
}
else if(playerId == 'ytvideo2'){
var ytplayer = document.getElementById("ytplayer2");
//ytplayer.addEventListener("onStateChange", "onytplayerStateChange", false);
if (ytplayer.addEventListener) {
ytplayer.addEventListener("onStateChange", "onytplayerStateChange", false);
} else if (ytplayer.attachEvent) {
ytplayer.attachEvent("onStateChange", onytplayerStateChange);
}
}
}
function onytplayerStateChange(newState) {
if(newState == 0){
$.fn.colorbox.close();
}
}