Embedding youtube videos in an html5 canvas

[mentalcase129]

Hi guys.

I'm trying to embed a youtube video in an html5 canvas but I'm not having much look finding an easy way to do it.  Coding isn't really my thing, but I used to do this in actionscript3 and I have a hard time believing it's not possible in html5.

Thanks!

[ClayUUID]

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.

[mentalcase129]

Cool thanks.  Follow up question though because my brain isn't the most code oriented.  That code you've just given me is pretty new to me, I think?  What part of that should I be swapping out with my youtube embed code?  Or is there a space in that code where I add my embed stuff?

Thanks

[mentalcase129]

Actually I just noticed your comment at the end.  I'd missed that before.  But I'm still a little unclear on how to make this work...

[ClayUUID · Accepted solution]

Okay, here's a function just for attaching YouTube videos:

mkYouTube = function(id, x, y, w, h, src, allow) {

    var f = document.createElement("iframe");

    f.id = id;

    f.allow = allow;

    f.frameBorder = "0";

    f.setAttribute("allowfullscreen", "")

    f.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px;";

    f.src = src;

    canvas.parentNode.appendChild(f);

}

Example usage:

mkYouTube("myvid", 20, 20, 560, 315, "https://www.youtube.com/embed/QH2-TGUlwu4", "autoplay; encrypted-media");

[mentalcase129]

Gaud I'm feeling so stupid right now.  I'm still not getting it to work, but I'm sure I'm missing something super simple.  Would you be able to send me an fla with it in action?  I think I need to actually see it working.

Thanks and uh...sorry haha

[marek_g]

Hi! Thanks for this @ClayUUID , it's pretty handy. Is it possible to add detection of video end here?