Question

93

Youtube iFrame API 'YT is undefined'

rated 0 times [ 99] [ 6] / answers: 1 / hits: 18125 / 10 Years ago, mon, january 26, 2015, 12:00:00

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.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));

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sonja

Add To Favorites

Follow

Total Points: 541

Total Questions: 113

Total Answers: 114

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

sonja questions

1 Filtering table data for multiple columns Angular 10

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Auto clear cache from browser

Sun, Oct 11, 20, 00:00, 4 Years ago

1 react-table has a issue with rendering in next.js

Thu, May 21, 20, 00:00, 4 Years ago

1 How to stop purging tailwind components

Sun, Nov 10, 19, 00:00, 5 Years ago

1 JS - String includes a substring that matches regex

Mon, Aug 26, 19, 00:00, 5 Years ago

View All

answered 10 Years ago admin · Accepted Answer

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

  }

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

EDIT

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