javascript - Why isn't the YouTube iframe player calling onYouTubePlayerReady when it's loaded?

Question

I want to load a YouTube video, then mute, play, pause, and unmute it immediately. In doing this, I hope to present the user with a video that doesn't have a big play button on it, and does have the controls on the bottom. In order to do this, I have the following code:

<script type="text/javascript">
function onYouTubePlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubePlayerAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid);
}
function onYouTubeIframeAPIReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}
function onPlayerReady(playerid)
{
    mutePlayPauseUnmute(playerid)
}

function mutePlayPauseUnmute(playerid)
{
    var player = document.getElementById(playerid);
    player.mute();
    player.playVideo();
    player.pauseVideo();
    player.unMute();
}
</script>
<iframe id="quotedVideo1" type="text/html" width="246" height="160" src="https://www.youtube.com/embed/NWHfY_lvKIQ?modestbranding=1&rel=0&showinfo=0&autohide=1&iv_load_policy=3&theme=light&enablejsapi=1&playerapiid=quotedVideo1" frameborder="0"> <!-- Magic Comment --> </iframe>

However, upon inspection, neither onYouTubePlayerReady, onYouTubePlayerAPIReady, onYouTubeIframeAPIReady, onPlayerReady, nor mutePlayPauseUnmute is ever called. What have I done wrong? According to https://developers.google.com/youtube/js_api_reference#onYouTubePlayerReady it looks like it should work, but it doesn't.

Answer 1

You're confusing two different player APIs here.

Do you want to use the iframe player? If so, you'll want to look at: https://developers.google.com/youtube/iframe_api_reference.

Instead of defining onYouTubePlayerReady, you'll want to define the following method: onYouTubeIframeAPIReady, create your player, and then assign an onPlayerReady callback.

Make sure you're including the JavaScript for the iframe player API, in order for onYouTubeIframeAPIReady to be called:

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

---

Worth noting from the doc, since you're writing the iframe instead of using JavaScript to do that for you:

If you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag, or the videoId and player parameters, which are are specified in the src URL.

Also, in your mutePlayPauseUnmute function..

playerid.mute();
playerid.playVideo();
playerid.pauseVideo();
playerid.unMute();

You'll want to trigger the actual the methods on the player as opposed to the playerid as described above.