onReady not firing for embedded youtube iframe

Question

I am having issues getting the youtube api working. The API itself loads and the onYouTubeIframeAPIReady() function gets called, but the onReady doesn't work.

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

function onYouTubeIframeAPIReady() {
  log('API')
  log(document.getElementById('yt-pilezspnvu'));
  var player = new YT.Player('yt-pilezspnvu', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  log(event);
}
function onPlayerStateChange(event) {
  log(event);
}

The code above isn't wrapped in any functions or anything. The errors in the picture below are just my adblock stuff. I've tried adding origin=http://example.com as pointed out in this thread https://stackoverflow.com/a/20505337/736967 but still not working.

What happens if you use the [event.target.playVideo();](https://developers.google.com/youtube/iframe_api_reference) logger of iframe API? — ReyAnthonyRenacia, Apr 06 '17 at 09:43
I can't use `event` since it will be undefined. That is why I am waiting for the `onReady` and `onStateChange` events — Ronnie, Apr 06 '17 at 16:42

score 0 · Answer 1 · answered Apr 01 '17 at 00:48

I think that you need some extra bits that are missing.
Try adding in this to your code.

  ytplayer = new YT.Player('ytplayer', {

      height: '385',
      width: '640',
      videoId: '[your-videoID]',
      playerVars: {'wmode': 'opaque', 'autohide': 1 , 'enablejsapi': 1 , 'origin': 'http://www.yousite.com', 'rel': 0},

        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
        }

playerVars has many parts and you can use or not. But you definatly need to have something load into the player. VideoID or PlayList. Else nothing will happen.

score 0 · Answer 2 · answered Jan 03 '18 at 17:33

I had a similar issue with an overlay image being clicked and the onReady event never seemed to fire even though all the other events did; obvious through console logs in each.

The issue was apparently a race event. Clicking the overlay image should remove the image and start the YouTube video playing. I also have several videos on the same page. The click event to play the video should be placed inside the onReady event instead of the click event firing the play event. I have trimmed this down as much as I could as our DOM has several elements inside the video container, including the overlay image, captions, etc.

Here is my solution:

    var player = new Array;
    window.onYouTubeIframeAPIReady = function() {
        // Loop through the existing video iframes designated with the inital string 'vidframe_' in the id
        jQuery('iframe[id^="vidframe_"]').each(function (i, val) {
            var $this = $(this); // iframe container
            var $vidWrapper = $this.closest('.video-wrapper');
            // Make sure it is a YouTube video. This data attribute is set when the iframe is created by my code
            if( $vidWrapper.data("video-source") == "youtube" )
            {
                // Initialize each YouTube video present
                player[i] = new YT.Player($this.attr('id'), {
                    events: {
                        onReady: function(event) {
                            // Set the click event listener here
                            $vidWrapper.on("click", function() {
                                //  Target the overlay image
                                // 'this' is now the .video-wrapper image element
                                var imgOver = $(this).find('figure');
                                // Remove image overlay
                                if( imgOver )
                                    imgOver.fadeOut();
                                // Target the right player
                                player[i].playVideo();
                            });
                        }
                    }
                });
            }
        });
    };

I hope this helps anyone else who may be searching for an errorless onReady event not seemingly working. This css-tricks article is what really gave me the best clue.

onReady not firing for embedded youtube iframe

2 Answers2