Embedding youtube videos in an html5 canvas

You need to float a DIV layer above the canvas, containing YouTube's embed widget. The code for adding a new DIV element to the browser DOM is pretty straightforward, but here's a generic function for doing it:

// Create a DIV layer above the canvas

// Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)

// CSS styling is a CSS-formatted literal string

mkDiv = function(id, x, y, w, h, html, css) {

    var d = document.createElement("div");

    d.id = id;

    d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");

    d.innerHTML = html;

    canvas.parentNode.appendChild(d);

}

// Remove an element by ID name

rmDiv = function(id) {

    try {

        var elem = document.getElementById(id);

        elem.parentNode.removeChild(elem);

    }

    catch(e) {}

}

Ah, wait, I've just looked at the YouTube embed code, and it uses an iframe. In that case it would be pointless to wrap the iframe inside a div, though I think it would work. But it would be more efficient to just add the iframe directly to the DOM.