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.

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.

• javascript
• jquery
• youtube-api
• dom-events
• swfobject

• addEvent should work. Can you show the code of how you are using addEvent. – Rajat Commented May 21, 2010 at 21:10
• I simply did ytplayer.attachEvent("onStateChange", onytplayerStateChange); right below addEventListener, I didn't put in a condition, figured it wouldn't matter. – Derek Commented May 21, 2010 at 21:20
• I updated my code with an attachEvent in the ytvideo2, it works in FF but not IE. I MUST get this to work in IE. I'm testing in FF, IE8, and IE patibility mode (IE6?), works on neither IE. A workaround would be fine, any suggestions? – Derek Commented May 21, 2010 at 21:29
• 1 Let me make sure I understand what you're saying. Running the code you show above, you do NOT see a 'great' alert in IE and you do not get any error reports? When you say IE, you mean no version of IE whatsoever? Can you provide a link to a test page so that I might take a look? It seems to me that if the example page I provided in my answer works in IE, that you know the Google code is fine. You should now be trying to figure out what is difference between your code and Google's. – Josh the Goods Commented May 24, 2010 at 1:48

3 Answers 3

IE doesn't support addEventListener does it?? You need attachEvent right?

if (el.addEventListener){   
    el.addEventListener('click', modifyText, false);    
else if (el.attachEvent){   
    el.attachEvent('onclick', modifyText);   
}

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./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

New answer

The YouTube player object implements its own addEventListener method which is more like how AS3's syntax. As per the information listed here:

player.addEventListener(event:String, listener:String):Void

YouTube provides an example on the page I linked which I'll provide here:

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   alert("Player's new state: " + newState);
}

YouTube also provides an example page that seems to prove out that their example code works in IE. I'll link that example page here.

Now, here's an attempt at re-writing the pertinent parts of your code to work as per the examples provided by Google/YouTube:

function onYouTubePlayerReady(playerId) {
  if(playerId && playerId == 'ytvideo1'){
    var ytplayer = document.getElementById('ytplayer1');
  } else if(playerId && playerId == 'ytvideo2'){
    var ytplayer = document.getElementById("ytplayer2");
  } else {
    return;
  }

  ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}

So, it turns out that the mistake being made here arises from the confusion created by the use of the method name 'addEventListener'. In the W3C JavaScript implementation, the second parameter is a function while in the YouTube implementation, the second parameter is a string. Give this a shot =).