onReady not being called

Question

    var player = null;

function LoadYouTubeIframeAPI() {
  var scriptElement = document.createElement("script");
  scriptElement.src = "http://www.youtube.com/iframe_api";
  var firstScriptElement = document.getElementsByTagName("script")[0];
  firstScriptElement.parentNode.insertBefore(scriptElement, firstScriptElement);
}

function onYouTubeIframeAPIReady() {
  var playerParams = {
    playerVars: {
      "enablejsapi": 1,
      "origin": document.domain,
      "rel": 0
    },
    events: {
      "onReady": onPlayerReady,
      "onError": onPlayerError,
      "onStateChange": onPlayerStateChange
    }
  };
  player = new YT.Player("player", playerParams);
}

function onPlayerReady(event) {
  alert("ready")
}

function onPlayerError(event) {}

function onPlayerStateChange(event) {}

Here's my full code.

function onPlayerReady(event) {
    alert("ready")
}

Is never getting fired for some reason. Can anyone help with this? I just can't get it to work for hours.. Google is not helping me at all.

Answer 1

1. Make sure you have a <div> Element for your player.
2. Make sure the function LoadYouTubeIframeAPI is actually called. Because in your code it never gets executed. You are just defining it.
3. Make sure you are not accessing your site over HTTPS because loading HTTP Ressourcs with javascript only works on HTTP sites.

Here is a working example, you can just create a file called test.html on your desktop, paste the contents into it and run it with a webbrowser. You'll see it works just fine.

Here you can find the API Reference to see some more details.