How to find out when a youtube embedded iframe is loaded

Question

I am trying to embed a youtube iframe into my application and listen to when that youtube video is loaded and ready to be played; my idea is to have a user press a play button, and not be shown the autoplaying embedded video until the video is completely ready to be played, and thus the user doesn't have to press a button and then wait for the embedded player to load.

I tried taking a look at this youtube iframe api documentation and various related stack overflows but still find myself stuck on how I can add a listener to my iframe player to find out when the video is completely loaded. The onLoad global event attribute doesn't seem to be the solution I am looking for either. How can I find out when a particular youtube embedded iframe video is completely loaded and ready to be played? Am I implementing the iframe api incorrectly? You can see my attempt at it below. Thanks!

const YoutubePlayer: React = () => {
  const readyFn = () => console.log('ready');
  let player;
  const onYouTubePlayerAPIReady = () => {
    player = new window.YT.Player("youtube-iframe-id", {
      height: '390',
      width: '640',
      videoId,
      events: {
        onReady: readyFn,
      },
    });
  };

  return (
    <iframe
      allowFullScreen
      id="youtube-iframe-id"
      src="https://www.youtube.com/embed/XmnZ9HZTHjw"
    />
  );
};


ReactDOM.render(<YoutubePlayer />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<div id="app"></div>

you may use `onYouTubeIframeAPIReady ` as stated in doc. `onYouTubeIframeAPIReady` – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads. — Kais, Nov 25 '19 at 05:00

score 1 · Answer 1 · answered Nov 25 '19 at 06:08

Actually an iframe is like another thread of JavaScript inside the page. And with this condition you just can have connection between threads with posting message and listening them with addEventListener. like below:

document.addEventListener('message', () => { /* Do Something */ }, false);

And for loading of YouTube you can use the onLoad method to post the message that the video is loaded and pass it to another thread and the another thread Do Something.

I hope my answer will help you my friend.

score 1 · Accepted Answer · answered Nov 26 '19 at 03:33

1

I ended up injecting the script when the component mounted and adding the event listeners as outlined in this answer.

answered Nov 26 '19 at 03:33

Jimmy

3,090
12
42
99

score 0 · Answer 3 · edited Mar 11 '20 at 11:02

do this on your html page

 <iframe id="ik_player_iframe"
 frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
 width="560"></iframe>

    function onYouTubeIframeAPIReady() {
      //creates the player object
      ik_player = new YT.Player('ik_player_iframe');

      console.log('Video API is loaded');

      //subscribe to events
      ik_player.addEventListener("onReady",       "onYouTubePlayerReady");
      ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
    }

    function onYouTubePlayerReady() {
      console.log('Video is ready to play');
    }

    function onYouTubePlayerStateChange(event) {
      console.log('Video state changed');
    }

How to find out when a youtube embedded iframe is loaded

3 Answers3

Linked