JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<div id="container">
    <video src="http://www.808.dk/pics/video/gizmo.webm"></video>
</div>

CSS

.filter {
    -webkit-filter: blur(15px);
}
#container {
    overflow: hidden;
}
video {
    display: block;
    margin: 0 auto;
}

JavaScript

var backlight = function (element, container) {
    var canvas,
        context,
        draw,
        drawableWidth,
        videoWidth = element.clientWidth,
        videoHeight = element.clientHeight,
        containerWidth = container.clientWidth;
    drawableWidth = Math.round((containerWidth - videoWidth) / 2 + videoWidth * 0.1);
    if (window.getComputedStyle(container).position === 'static') {
        container.style.position = 'relative';
        container.style.top = 0;
        container.style.left = 0;
    }
    if (window.getComputedStyle(element).position === 'static') {
        container.style.position = 'relative';
        container.style.top = 0;
        container.style.left = 0;
    }
    canvas = document.createElement('canvas');
    canvas.style.webkitFilter = 'blur(20px)';
    canvas.style.position = 'absolute';
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.width = containerWidth;
    canvas.height = videoHeight;
    container.insertBefore(canvas, element);
    
    context = canvas.getContext('2d');

    draw = function () {
        context.drawImage(element, 0, 0, videoWidth * 0.1, videoHeight, 0, 0, drawableWidth, videoHeight);
        context.drawImage(element, videoWidth * 0.9, 0, videoWidth, videoHeight,
            containerWidth - drawableWidth, 0,
            containerWidth, videoHeight);
        window.setTimeout(draw, 40);
    };
    
    draw();
};

document.addEventListener('DOMContentLoaded', function () {
    var video = document.getElementsByTagName('video')[0];
    video.addEventListener('loadedmetadata', function () {
        backlight(this, this.parentNode);
        this.play();
        this.loop = true;
    }, false);
}, false);