Question

I have the following code snippet that controls an embedded youtube player. It works great on Chrome and Safari but not on Firefox.

jsfiddle : http://jsfiddle.net/fuSSn/4/

Code from my app:

the iframe:

<div class="tubeframe" id="video-frame-155" style="">
<iframe title="YouTube video player" width="350" height="262"      src="http://www.youtube.com/embed/hc5xkf9JqoE?HD=1;rel=0;showinfo=0;autohide=1" frameborder="0" allowfullscreen="" id="video-frame-155-frame"></iframe>
</div>

my javascript:

var source_tag = document.createElement("script");


var first_source_tag = document.getElementsByTagName("script")[0];
first_source_tag.parentNode.insertBefore(source_tag, first_source_tag);


// This function will be called when the API is fully loaded
function onYouTubeIframeAPIReady() {
YT_ready(true)
console.log("api loaded! yikes")
}


function getFrameID(id){
var elem = document.getElementById(id);
if (elem) {
    if(/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
    // else: Look for frame
    var elems = elem.getElementsByTagName("iframe");
    if (!elems.length) return null; //No iframe found, FAILURE
    for (var i=0; i<elems.length; i++) {
       if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
    }
    elem = elems[i]; //The only, or the best iFrame
    if (elem.id) return elem.id; //Existing ID, return it
    // else: Create a new ID
    do { //Keep postfixing `-frame` until the ID is unique
        id += "-frame";
    } while (document.getElementById(id));
    elem.id = id;
    return id;
}
// If no element, return null.
return null;
}
// Define YT_ready function.
var YT_ready = (function(){
  var onReady_funcs = [], api_isReady = false;
  return function(func, b_before){
      if (func === true) {
          api_isReady = true;
          while(onReady_funcs.length > 0){
              // Removes the first func from the array, and execute func
              onReady_funcs.shift()();
          }
      }
      else if(typeof func == "function") {
          if (api_isReady) func();
          else onReady_funcs[b_before?"unshift":"push"](func);
      }
  }
})();


var video = function ( videoid,  frameid) {
var player;
var that;
var seconds;
var duration;
var stateChangeCallback;
var update_play = 0;
  return {
    setOnStateChangeCallback: function(callback) {
      stateChangeCallback = callback;
    },
    getCurrentTime: function() {
      return player.getCurrentTime();
    },

    getPlayer: function () {
      return player;
    },
    getVideoFrameId: function () {
      return "video-frame-" + videoid;
    },
    initVideo: function (second) {
        console.log("initing")
      that = this;
      YT_ready(function(){
        var frameID = getFrameID("video-frame-" + videoid);
        console.log("creating player")
          console.log(frameID)
        if (frameID) { //If the frame exists
          console.log("frame exists")
          player = new YT.Player(frameID, {
              events: {
                  "onStateChange": that.stateChange
              }

          });
          console.log("Player Created!");
          if (second) {
            console.log(second)
            setTimeout(function() { console.log("seek to"); player.seekTo(second, false); player.stopVideo()}, 1000);
          }
        }
      });
    },
    stateChange: function (event) {
      console.log("event.data = ", event.data);
      switch(event.data) {
        case YT.PlayerState.PLAYING:
        {
          if (stateChangeCallback)
            stateChangeCallback("play", player.getCurrentTime(), player.getDuration());
            onsole.log("play");
        }
        break;
        case YT.PlayerState.PAUSED:
        case YT.PlayerState.CUED:
        case YT.PlayerState.ENDED:
        {
          if (stateChangeCallback)
            stateChangeCallback("pause", player.getCurrentTime(), player.getDuration());
          console.log("pause");
        }
        break;
      }
    },
    pauseVideo: function () {
      player.stopVideo();
      console.log('player.stopVid()');
    },
    seekTo: function(second) {
      player.seekTo(second, false);
    }
  };
};



function onStateChange(vid, action, second, total) {
if (Videos[vid]) {
  console.log( (second / total) * 100);
}
};





$(document).ready(function () {
var Videos = {};
logger.info("heyyy")
var videoId=155;
//if (videoId) {
  Videos[videoId] = video(videoId,  155);
    console.log(Videos[155])
  Videos[155].initVideo();
  Videos[155].setOnStateChangeCallback(function(action, second, total) {
    onStateChange(155, action, second, total);
  });
//}
Videos[155].seekTo(1000, false);
onStateChange(155, "start", 0, 0);
});

I know that the required script tags are being added, I can test that from console. I also know that onYouTubePlayerAPIReady() is actually called. But I still receive errors like

TypeError: player.stopVideo is not a function

When I run the three lines that adds the source tag again from the web console on firefox, the api seems to load and everything starts working again.

I have been struggling with this for days and I really need help figuring out what might be wrong. If it helps my application is developed in ruby on rails but I don’t think this is relevant information.

Thanks

Answer 1

There is no problem with the above code. My video was loaded in a bootstrap modal. Modal’s hide property would make it invisible to firefox and firefox would not load the api at all. So I removed the modal hide class and instead of display:none I used item.css(“visibility”, “visible”); and item.css(“visibility”, “hidden”); which made firefox load the api.