Search code examples
javascriptjqueryyoutube-apidom-eventsswfobject

Javascript addEventListener onStateChange not working 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.


Solution

  • 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