JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<video src="http://simpl.info/videoalpha/video/soccer1.webm" autoplay loop >
    
<!-- credits for the video: http://simpl.info/videoalpha/ -->

CSS

video{
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}

JavaScript

wvar video = document.querySelector('video');
document.addEventListener('mousemove', function(evt){
    var x = (360 - evt.pageX - 180) * 0.5;
    var y = (360 - evt.pageY - 180) * 0.5;
    video.style.webkitFilter = "drop-shadow("+x+"px "+y+"px 10px rgba(0,0,0,.5))";
}, false);