Skip to main content
Known Participant
July 27, 2018
Answered

Embedding youtube videos in an html5 canvas

  • July 27, 2018
  • 1 reply
  • 4602 views

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!

This topic has been closed for replies.
Correct answer ClayUUID

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");

1 reply

Legend
July 27, 2018

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.

Known Participant
July 27, 2018

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...

ClayUUIDCorrect answer
Legend
July 27, 2018

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");