Youtube API onReady doesn't work

Question

Here is my code: After the loading, it should invoke event --"onReady", then print out "My player is onReady" in browser console. But it doesn't show. Basically, this is a very simple example for YouTube API usage, but I can't find what's wrong here. Even I have followed steps in the youtube video.

Any helps? Thank you in advance!!

<html>
<head> 
  <meta charset="UTF-8"> 
  <title>THis is YOutube API testing </title>
</head>

<body>

   <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>
  <script>
  //import YouTube API script
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //create the YouTube Player
  var player;

  function onYouTubeIframeAPIReady() {
    console.log("API  is Ready");
    player = new YT.Player("video", { 
    events:{
      'onReady': onPlayerReady
      } 
    });
  }
  function onPlayerReady() {
    console.log("My plaer is onReady");
  }
  </script>
</body>
</html>

Here is log in browser console: enter image description here

Sergio Casares · Answer 1 · 2018-03-02T16:44:41.610

You will need modify that:

first: import from youtube the API with script.

<script async src="https://www.youtube.com/iframe_api"></script>

after import the youtube API, you can start code your video player.

//create the YouTube Player
function onYouTubeIframeAPIReady() {
  console.log("API is ready.")
  var player;
  player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
    videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
    width: '560', // Specific width
    height: '315',  // Specific height
    playerVars: {
      end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
    }, events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  console.log("My player is onReady");
}

after this, you need create an div, this div contains your video.

//create DIV spacer
<div id="videoLoader"></div>

complete without errors:

<html>
<head> 
 <meta charset="UTF-8"> 
 <title>This is Youtube API test</title>
 <script async src="https://www.youtube.com/iframe_api"></script>
 <script>

  //create the YouTube Player
  function onYouTubeIframeAPIReady() {
   console.log("API is ready.")
   var player;
   player = new YT.Player('videoLoader'/*Specific your div ID here for display the video.*/, {
     videoId: '34xO919uKdY', // Specific your video ID http://www.youtube.com/embed/videoIDHere
     width: '560', // Specific width
     height: '315',  // Specific height
     playerVars: {
      end: 0, autoplay: 1, loop: 0, controls: 0, showinfo: 0, modestbranding: 1, fs: 0, cc_load_policty: 0, iv_load_policy: 3, autohide: 0
     }, events: {
      'onReady': onPlayerReady
     }
    });
   }

   function onPlayerReady() {
    console.log("My player is onReady");
   }

 </script>
</head>
<body>
 <!--Create iframe with the video player-->
 <div id="videoLoader"></div>
</body>
</html>

score -10 · Accepted Answer · answered Mar 02 '15 at 01:51

-10

You weren't calling the onPlayerReady() function correctly.

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

  //create the YouTube Player
  var player;

  function onYouTubeIframeAPIReady() {
    console.log("API  is Ready");
    player = new YT.Player("video", { 
    events:{
      'onReady': onPlayerReady()
      } 
    });
  }
  function onPlayerReady() {
    console.log("My player is onReady");
  }

<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/02GcUZ6hgzo" frameborder="0" allowfullscreen></iframe>

answered Mar 02 '15 at 01:51

sideroxylon

4,338
1
22
40

But why does the example in the video work? -- https://www.youtube.com/embed/02GcUZ6hgzo – Haoyu Chen Mar 02 '15 at 01:56
And also I just found in google's official docs, it doesn't add "()". Here is the link-- https://developers.google.com/youtube/iframe_api_reference – Haoyu Chen Mar 02 '15 at 02:01
Yes, I can see that. I don't know why - the onReady event in the API is firing, but the only way I can get the onPlayerReady function to trigger is as above. – sideroxylon Mar 02 '15 at 02:44
5

Please notice that the answer above is incorrect, the only reason the `onReady` handler fires is because it's directly executed, due to the `()` after its name, meaning it's called directly. See [Youtube Embed Iframe - Events Not Firing In Local](http://stackoverflow.com/questions/20503462/youtube-embed-iframe-events-not-firing-in-local) for a similar question with a good answer. – magnusdahlstrand May 05 '16 at 14:08
I'm running into the same problem and I've noticed if I mouse into my browser window, the onReady function will fire. Is it possible that onReady function is tied into browser activity of some sort? – ericso Jan 26 '17 at 18:12
In my case, I had an already existing video. I needed to add a param to an iframe - ?enablejsapi=1, but I found that in the URL of video already was a question mark and as a result, the URL was - URL??enablejsapi=1, after correcting this problem, I've got the onReady callback work. – Eugene Jan 21 '19 at 12:57

Youtube API onReady doesn't work

2 Answers2