youtube javascript api doesn't trigger callback

Question

Hello all,
I'm trying to work with youtube's javascript api and am having a problem initializing it/getting a callback when it's ready. Api documentation can be found here.

I'm getting the videos from the json provided by youtube and embedding them like this:

//insert flash object in video element
        $(video_elm_arr[i]).append('<object id="video_' + i + '" width="' + width + '" height="' + height + '">' + 
                                   '<param name="movie" value="' + video_url + '?showinfo=0&enablejsapi=1"></param>' +
                                   '<param name="allowFullScreen" value="true"></param>' +
                                   '<param name="allowscriptaccess" value="always"></param>' +
                                   '<embed src="' + video_url + '?showinfo=0&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + width + '" height="' + height + '"></embed>' +
                                   '</object>');

Note that I'm adding 'enablejsapi=1' to the url which should enable the javascript api. However, when I listen for the callback that the api is ready, ie:

//set player functionality when javascript api is available
  function onYouTubePlayerReady(playerId) {
    alert('api is ready!');
  }

it never gets triggered. Everything else on the page (including the youtube videos) loads correctly, and even the other parameter I pass in the videos url (showinfo=0) works properly. What gives? Anyone see my error? All help is greatly appreciated...

Answer 1

Is the page being served from a server (ie, not from a local machine)? Youtube (or Flash in general) is not allowed to interact with JavaScript if the page is served locally.

Answer 2

Try adding &playerapiid=THEPLAYERIDYOUWANTPASSEDIN to the URL. This is sent to the callback as the "playerId" parameter.

//insert flash object in video element
        $(video_elm_arr[i]).append('<object id="video_' + i + '" width="' + width + '" height="' + height + '">' + 
                                   '<param name="movie" value="' + video_url + '?showinfo=0&enablejsapi=1&playerapiid=' + i + '"></param>' +
                                   '<param name="allowFullScreen" value="true"></param>' +
                                   '<param name="allowscriptaccess" value="always"></param>' +
                                   '<embed src="' + video_url + '?showinfo=0&enablejsapi=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + width + '" height="' + height + '"></embed>' +
                                   '</object>');