Youtube api does not load on firefox

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

jsfiddle :

Code from my app:

the iframe:

<div class="tubeframe" id="video-frame-155" style="">
<iframe title="YouTube video player" width="350" height="262"      src=";rel=0;showinfo=0;autohide=1" frameborder="0" allowfullscreen="" id="video-frame-155-frame"></iframe>

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() {
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 ( return; //Existing ID, return it
    // else: Create a new ID
    do { //Keep postfixing `-frame` until the ID is unique
        id += "-frame";
    } while (document.getElementById(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
      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) {
      that = this;
        var frameID = getFrameID("video-frame-" + videoid);
        console.log("creating player")
        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) {
            setTimeout(function() { console.log("seek to"); player.seekTo(second, false); player.stopVideo()}, 1000);
    stateChange: function (event) {
      console.log(" = ",;
      switch( {
        case YT.PlayerState.PLAYING:
          if (stateChangeCallback)
            stateChangeCallback("play", player.getCurrentTime(), player.getDuration());
        case YT.PlayerState.PAUSED:
        case YT.PlayerState.CUED:
        case YT.PlayerState.ENDED:
          if (stateChangeCallback)
            stateChangeCallback("pause", player.getCurrentTime(), player.getDuration());
    pauseVideo: function () {
    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 = {};"heyyy")
var videoId=155;
//if (videoId) {
  Videos[videoId] = video(videoId,  155);
  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.



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.

Need Your Help

Calling Functions with parameters from CMD


Im new to scala and I've been looking everywhere for how to find how to structure my file I write with my function in it. Furthermore how to call that function from cmd. I'm trying to write a sim...

Unable to open file from C++ DLL


I have an application for which GUI is written in C# and the logic is written in C++ DLL. The DLL should open a file to read data from it. I have the data.txt file in the same folder as the DLL. Wh...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.