JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<canvas style="margin-top: 500px"></canvas>

JavaScript

const canvas = document.querySelector('canvas');

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

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