API de iFrame de Youtube ‘YT no está definido’

Estoy tratando de poner este código en una función de módulo:

$(document).ready(function() { VIDEO.onYouTubeIframeAPIReady(); } var VIDEO = (function (my, $){ var tag = document.createElement('script'); var onPlayerStateChange; tag.src = "https://www.youtube.com/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)); 

El problema es: incluso se ejecuta automáticamente, no sucede nada y no se muestra el iFrame. Estoy tratando de hacer esto porque es parte de una tarea. Tenemos que trabajar en módulos.

Necesitas simplificar el código:

HTML

 

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.com/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(); } 

Y un ejemplo vivo: http://jsbin.com/maweqahuhi/1/ http://jsbin.com/nipogicide/2/

EDITAR

Respecto a tu comentario, hice algún cambio en el código. Necesitas usar onYouTubePlayerAPIReady() para llamar al jugador más tarde. Edité todo el código anterior.