YouTube API — not firing 'onYouTubePlayerReady()'

Asked 17/1, 2010 at 23:42 Answered 3/7, 2013 at 15:26

From what I've read, this is how I should setup the YouTube API:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' />
    <title>Youtube Player</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      function onYouTubePlayerReady(id) {
        console.log("onYouTubePlayerReady() Fired!");
        var player = $("#youtube_player").get(0);
      }

      var params = { allowScriptAccess: "always" };
      var atts = { id: "youtube_player" };
      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
                         "youtube", "425", "356", "8", null, null, params, atts);

    </script>
  </head>
  <body>
    <div id="youtube"></div>
  </body>
</html>

However, 'onYouTubePlayerReady()' doesn't fire at all, and if I manually get a reference to the player, a lot of methods are undefined; for example, cueVideoById() works, but playVideo() doesn't.

How can I fix this problem?

Blindage answered 17/1, 2010 at 23:42 Comment(6)

This is probably not it but can you try giving the document a HTML 4 doctype instead of the HTML 5 one? Just to exclude that possibility. – Letitialetizia 17/1, 2010 at 23:45

And are you on a web server with this, as stated in the docs? code.google.com/apis/youtube/js_api_reference.html – Letitialetizia 17/1, 2010 at 23:47

@Pekka: Nope I wasn't, just noticed that on the API docs page. I think I need to read things more in future. Thanks :) – Blindage 17/1, 2010 at 23:54

You're welcome! I added my comment as an answer, so you can close it if it worked for you. – Letitialetizia 17/1, 2010 at 23:54

i tried all the solutions here and nothing worked...not loading script before dom, not running on server, not including youtube api, not loading script in script tag in head... – Outrange 8/4, 2014 at 4:8

and probably because of this: #15004097 xD – Outrange 8/4, 2014 at 4:13

You need to be on a web server with your test script, as stated in the documentation:

Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.

Letitialetizia answered 17/1, 2010 at 23:54 Comment(0)

this function:

function onYouTubePlayerReady(playerid) {
  console.log('readyIn');
};

don't have to be directly in head in separate script tag.

Only rule you have to keep is: don't put this function inside domready event - it has to be defined sooner.

For example in mootools I use it like this:

function onYouTubePlayerReady(playerid) {
  echo('readyIn');
};

document.addEvent('domready', function() { 
   ...
});

Parotitis answered 22/10, 2012 at 8:7 Comment(1)

This answer is the best for me – Probate 9/10, 2014 at 16:49

I have the answer, separate out this portion of the script and put it in the head in its own script tag. OMG, finally

<script type="text/javascript" language="javascript">
function onYouTubePlayerReady(playerid) {
    ytp = document.getElementById('ytplayer');
    ytp.mute();
};
</script>

Leisha answered 23/10, 2011 at 8:12 Comment(0)

I consider this the best way of adding a youtube video to your website with javascript. It gives you a very clear way of dealing with events. It works on a local machine, and as far as I know it works on apple devices. You can use all the events and function described in the javascript documentation for the youtube api.

<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'JW5meKfy3fY',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(evt) {
    evt.target.playVideo();
}
function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}
</script>

source: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

Aden answered 20/4, 2012 at 9:12 Comment(0)

<!DOCTYPE html>

had to lead the page in order for the html5 stuff to function for me in FF4

Wilsonwilt answered 17/5, 2011 at 20:22 Comment(0)

If you're embedding youtube videos like so:

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

then you should place

<script src="http://www.youtube.com/player_api"></script>

after the </iframe>. At least that's how I got it to work.

Additionally, if you're dynamically changing the [src] attribute of the iframe via jQuery or whatever to load a new video then you need to call onYouTubePlayerAPIReady() after it has loaded.

I prefer to change the [src] attribute and then: setTimeout(onYouTubePlayerAPIReady, 500);

Conni answered 3/7, 2013 at 15:26 Comment(0)

Just had the same issue, but for another reason. It worked in Chrome but not Firefox, and the reason was that I had a http header "Content-type: text/xml" instead of "Content-type: text/html". Serving as HTML now fires the onYouTubePlayerReady event in Firefox, too.

Just posting this in case someone stumbles on this answer from Google (like I just did when trying to find a solution).

Prototrophic answered 20/12, 2011 at 14:12 Comment(0)

Recommended topics

Hot tags