JSFiddle - React, Tailwind, and code Playground

by Santiago J

CSS

body {
    background-color: #000;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    display: block;
    float: left;
}

JavaScript

// Modified from mrdoob: gist.github.com/1265705
var stage = document.createElement("div");
stage.id = "stage";
var video = document.createElement("video");
video.autoplay = true;
video.loop = true;
video.addEventListener("loadedmetadata", function() {

    var scale = 0.3,
        width = video.videoWidth * scale,
        height = video.videoHeight * scale,
        cols = Math.floor(window.innerWidth / width) + 1,
        rows = Math.floor(window.innerHeight / height) + 1,
        stageWidth = cols * width,
        stageHeight = rows * height,
        n = rows * cols;

    stage.style.width = stageWidth + "px";
    stage.style.height = stageHeight + "px";
    document.body.appendChild(stage);

    for (var i = 0; i < n; i++) {
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        canvas.context = canvas.getContext("2d");
        canvas.context.scale(scale, scale);

        stage.appendChild(canvas);
    }

    setInterval(function() {
        var child = stage.insertBefore(stage.lastChild, stage.children[0]);
        child.context.drawImage(video, 0, 0);
    }, 1000 / 30);

}, false);

window.onload = function() {
    video.src = "http://o-o.preferred.lax02s05.v17.lscache5.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Csource%2Cratebypass%2Ccp&fexp=902906&itag=43&ip=99.0.0.0&signature=D21A816726D6AD328CE18571392A12187B759600.5D046019EC2ACAA5F7BB8F71EAD9D45D73FA6523&sver=3&ratebypass=yes&source=youtube&expire=1323518303&key=yt1&ipbits=8&cp=U0hRSFVMVl9FTUNOMV9NRlpEOmYzQ0pHRHRXemRQ&id=eac34f2a0d209267";
};