YouTube player doesn't recognize embedded YouTube video

0
votes

I'm trying to hook up an embedded YouTube video with some backend code using the YouTube player api. I'm able to create a player object, but then when the state is ready, the code doesn't recognize the object I just created. What am I doing wrong?

<iframe id="playerLibrary" class="playerLocation" width="560" height="315" src="https://www.youtube.com/embed/YT2ZOD32lWw?rel=0&amp;showinfo=0&enablejsapi=0" enablejsapi="1" frameborder="0" allowfullscreen></iframe>

jquery:

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

  var player3;

  function onYouTubeIframeAPIReady() {
   player3 = new YT.Player('playerLibrary', {
      events: {
        'onReady': onPlayerReady(event),
        //'onStateChange': onPlayerStateChange
      },
      playerVars: {

      }
    });
}

function onPlayerReady(event) {
   console.log('ready'); //log: ready
   console.log(player3); //log: undefined
   //Hover play
    $('.playerLocation').on('mouseover',function(){
        player3.playVideo(); //log: Uncaught TypeError: player3.playVideo is not a function
    });
    //Blur Pause
   $('.playerLocation').on('mouseout',function(){
        player3.stopVideo(); //log: Uncaught TypeError: player3.stopVideo is not a function
    });
  }
1
jqueryyoutubeyoutube-api

1 Answers

0
votes

In your events param, it should be 'onReady': onPlayerReady, without the (event).

Currently you onPlayerReady function is run once when the player is being constructed, but it is not actually ready.

Also in your html, &enablejsapi=0 should be changed to &enablejsapi=1