Youtube IFrame API playVideo() Error

Question

Youtube's IFrame API is not working for me anymore. Both onYouTubeIframeAPIReady() and onYouTubePlayerReady() gets executed. However, when try loading/playing a video, I receive the following error:

base.js:2575 Uncaught TypeError: Cannot read property 'g' of null
    at jL (base.js:2575)
    at nL (base.js:2567)
    at PU.g.h.nh (base.js:5853)
    at E0 (base.js:3841)
    at q1.g.h.Lr (base.js:6904)
    at q1.g.h.Dy (base.js:6905)
    at r1 (base.js:3909)
    at L1.g.h.Vn (base.js:6937)
    at L1.g.h.nN (base.js:6679)
    at g.bD.g.h.V (base.js:5529)

Here is how I use the IFrame API

// Load YouTube Player
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 YouTube Player
var jukeBoxYoutubePlayer;
function onYouTubeIframeAPIReady() {
    console.log("iframe api ready");

    jukeBoxYoutubePlayer = new YT.Player('youtube_player', {
        height: '400px',
        width: '400px',
        events: {
            'onReady': onYouTubePlayerReady
        }
    });
}

// On Ready Event
function onYouTubePlayerReady(event) {
    console.log("player ready");

    jukeBoxYoutubePlayer.unMute();
    jukeBoxYoutubePlayer.setVolume(75);
}

Here is how I load and play a video:

jukeBoxYoutubePlayer.loadVideoById("ubtbkgUmHHE", 0, "large");
jukeBoxYoutubePlayer.playVideo();

I don't see why my code is not working. It has been working for months. I also re-checked the docs (https://developers.google.com/youtube/iframe_api_reference) for any new changes, but can't find any.

Fredrik Fredrik · Accepted Answer · 2017-04-28T14:04:59

It seems the issue was that my "youtube_player" iframe was hidden by CSS display:none. Apparently, YouTube requires the iframe to be visible. However, sizing the iframe to 1x1 px solved it for me.

Youtube IFrame API playVideo() Error

1 Answers