Echo Web Framework

Note that Linux Flash doesn't support the wmode=transparent setting used here, so Flash movies on Linux will ignore z-index/CSS positioning and simply appear on top of everything.

/**
 * A component which embeds a YouTube video player.
 *
 * @sp {String} movie the id of the movie to play
 */
Contrib.YouTubePlayer = Core.extend(Echo.Component, {

    $static: {
        getThumbnailUrl: function(movieId) {
            return "http://img.youtube.com/vi/" + movieId + "/1.jpg";
        }
    },

    componentType: "Contrib.YouTubePlayer"
});

/**
 * Synchronization peer for YouTubePlayer component.
 */
Contrib.YouTubePlayer.Sync = Core.extend(Echo.Render.ComponentSync, {

    $load: function() {
        Echo.Render.registerPeer("Contrib.YouTubePlayer", this);
    },

    _object: null,

    renderAdd: function(update, parentElement) {
        var movie = this.component.render("movie");
        
        if (Core.Web.Env.BROWSER_INTERNET_EXPLORER) {
            this._object = document.createElement("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\">");
        } else {
            this._object = document.createElement("object");
            this._object.type = "application/x-shockwave-flash";
        }
        this._object.width = Echo.Sync.Extent.toPixels(this.component.render("width", 425));
        this._object.height = Echo.Sync.Extent.toPixels(this.component.render("width", 350));
        this._object.data = "http://www.youtube.com/v/" + movie;
        var param = document.createElement("param");
        param.name = "movie";
        param.value = "http://www.youtube.com/v/" + movie;
        this._object.appendChild(param);
        param = document.createElement("param");
        param.name = "wmode";
        param.value = "transparent";
        this._object.appendChild(param);
        parentElement.appendChild(this._object);
    },

    renderDispose: function(update) {
        this._object = null;
    },
    
    renderUpdate: function(update) {
        var element = this._object;
        var containerElement = element.parentNode;
        this.renderDispose(update);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false; // Child elements not supported: safe to return false.
    }
});