Question

I am using the YouTube API to embed a video on a page. I call swfobject.embedSWF which embeds the video on the page, it works. When it is done loading, the API is supposed to call onYouTubePlayerReady. My question though is where do I have to place the callback in my class to get the function called?

Here is the code that I have tried, but that does not work.

class YouTube

    constructor: (@uid) ->
        youtube_video_container =   $('<div/>', {
              id: 'ytapiplayer'
        }).appendTo(main);

        params = { allowScriptAccess: "always" };
        atts = { id: "myytplayer" };

        swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=d9NF2edxy-M&version=3&enablejsapi=1", "ytapiplayer", "1280", "720", "8", null, null, params, atts);

    onYouTubePlayerReady: (playerId) ->
           alert "ready"

Answer 1

From the fine manual:

In addition, any HTML page that contains the YouTube player must implement a JavaScript function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

and onYouTubePlayerReady:

onYouTubePlayerReady(playerid)

Called when the player is fully loaded and the API is ready to receive calls. If a playerapiid is passed into the player via URL arguments, then it will be passed to this function.

So if you include &playerapiid=X in the URL’s CGI parameters, then that X will be the playerid when onYouTubePlayerReady is called.

All of that indicates that onYouTubePlayerReady is a global function rather than a method on an object of your choice or a callback that you can specify as you please. To make a global function with CoffeeScript, create a property on window:

window.onYouTubePlayerReady = (playerid) ->
    alert 'Ready'

You’d have to use the playerid to backtrack to the specific object that created the player through some globally accessible playerid-to-object map.

Even the addEventListener interface is based on names rather than callbacks so you’re stuck polluting the global namespace and routing things yourself.