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.
UPDATE 1:
Well, this is my current code. It works perfect in Firefox, but IE only outputs good. IE8 debugger doesn't report any errors either...
function onYouTubePlayerReady(playerId) {
if (playerId && playerId != 'undefined') {
if(playerId && playerId == 'ytvideo1'){
var ytswf = document.getElementById('ytplayer1');
alert('good');
} else if(playerId && playerId == 'ytvideo2'){
var ytswf = document.getElementById('ytplayer2');
} else {
}
setInterval('', 1000);
ytswf.addEventListener('onStateChange', 'onytplayerStateChange');
alert('great');
}
}
function onytplayerStateChange(newState) {
alert('amazing');
if(newState == 0){
$.fn.colorbox.close();
alert('perfect');
}
}
Update 3: Solution
Simply put onComplete in my colorbox and put the swfobject in that and it worked perfectly in IE.
from testing in IE it looks like the reference you are using
ytswf = document.getElementById('ytplayer1');
is assigned before the actual swf object is loaded, so IE thinks you are referring to a simple div element
you need to run this code
function onYouTubePlayerReady(playerId) {
ytswf = document.getElementById("ytplayer1");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
right after you call
swfobject.embedSWF("http://www.youtube.com/v/SPWU-EiulRY?
hl=en_US&hd=0&rel=0&fs=1&autoplay=1&enablejsapi=1&playerapiid=ytvideo1",
"popupVideoContainer1", "853", "505", "8", null, null, params, atts);
before you close out that $(function()
and place var ytswf;
right after the <script>
instead of further down