I'm trying to put this code in an module function:

$(document).ready(function()
    {
        VIDEO.onYouTubeIframeAPIReady();
}


        var VIDEO = (function (my, $){
var tag = document.createElement('script');
var onPlayerStateChange;
  tag.src = "";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;


   my.onYouTubeIframeAPIReady =function() {
    player = new YT.Player('player', {
      height: '490',
      width: '880',
      videoId: SONG.getArtistId(),
      playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': catchError
      }
    });
  }

  function onPlayerReady(event) {


  if(typeof(SONG.getArtistId()) == undefined)
  {
    console.log("undefineeeed"); 
  } 


    event.target.playVideo();   
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    }
    if(event.data == YT.PlayerState.ENDED)
    {
      location.reload();
    }
  }

  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

  return my;

}(VIDEO || {}, jQuery));

The problem is: even it's self-executing, nothing happens and the iFrame is not shown. I'm trying to do this because it's part of an assignment. We have to work in modules.

I'm trying to put this code in an module function:

$(document).ready(function()
    {
        VIDEO.onYouTubeIframeAPIReady();
}


        var VIDEO = (function (my, $){
var tag = document.createElement('script');
var onPlayerStateChange;
  tag.src = "https://www.youtube./iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;


   my.onYouTubeIframeAPIReady =function() {
    player = new YT.Player('player', {
      height: '490',
      width: '880',
      videoId: SONG.getArtistId(),
      playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': catchError
      }
    });
  }

  function onPlayerReady(event) {


  if(typeof(SONG.getArtistId()) == undefined)
  {
    console.log("undefineeeed"); 
  } 


    event.target.playVideo();   
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    }
    if(event.data == YT.PlayerState.ENDED)
    {
      location.reload();
    }
  }

  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

  return my;

}(VIDEO || {}, jQuery));

The problem is: even it's self-executing, nothing happens and the iFrame is not shown. I'm trying to do this because it's part of an assignment. We have to work in modules.

• javascript
• iframe
• module
• youtube-api
• youtube-javascript-api

• 1. you didn't hook up the onYouTubeIframeAPIReady function to any event. 2. var VIDEO is declared outside of the script tag 3. you are using Jquery without referencing it on your page. – avrahamcool Commented Jan 26, 2015 at 12:10
• @avrahamcool I'm sorry, I pasted the wrong code. I edited my post. (I have a reference to use jQuery, that's not the problem) I get: 'Uncaught ReferenceError: YT is not defined' – RW24 Commented Jan 26, 2015 at 12:24
• create a fiddle that demonstrate the problem, it will be easier to help. – avrahamcool Commented Jan 26, 2015 at 13:20

1 Answer 1

You need to simplify the code :

HTML

<div id="player"></div>

Javascript

$(document).ready( function() {
  console.log( "ready!" );
  loadPlayer();
});

function getArtistId() {
  return 'l-gQLqv9f4o';
}

function loadPlayer() { 
  if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {

    var tag = document.createElement('script');
    tag.src = "https://www.youtube./iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    window.onYouTubePlayerAPIReady = function() {
      onYouTubePlayer();
    };

  } else {

    onYouTubePlayer();

  }
}

var player;

function onYouTubePlayer() {
  player = new YT.Player('player', {
    height: '490',
    width: '880',
    videoId: getArtistId(),
    playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
    events: {
      'onStateChange': onPlayerStateChange,
      'onError': catchError
    }
  });
}

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      // setTimeout(stopVideo, 6000);
      done = true;
    } else if (event.data == YT.PlayerState.ENDED) {
      location.reload();
    }
  }

  function onPlayerReady(event) {

    //if(typeof(SONG.getArtistId()) == undefined)
    //{
    //  console.log("undefineeeed"); 
    //} 
    //event.target.playVideo();   
  }
  function catchError(event)
  {
    if(event.data == 100) console.log("De video bestaat niet meer");
  }

  function stopVideo() {
    player.stopVideo();
  }

And a live example : http://jsbin./maweqahuhi/1/ http://jsbin./nipogicide/2/

EDIT

Regarding your mentq i made some changement in the code. You need to use onYouTubePlayerAPIReady() to call the player later. I edited all the previous code.