Embedding youtube videos in an html5 canvas

Explorer ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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!

Views

2.4K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jul 27, 2018 Jul 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...

Likes

Translate

Translate
Adobe Community Professional ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 27, 2018 Jul 27, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 28, 2022 Mar 28, 2022

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines