JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_player">
  <video id="video" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f3/Big_Buck_Bunny_first_23_seconds_1080p.ogv/Big_Buck_Bunny_first_23_seconds_1080p.ogv.360p.webm" controls crossorigin="anonymous"></video>
</div>

CSS

body{
  background-color: black;
  height: 600px;
}
#main_player{
  margin: 50px;
  width: fit-content;
}

JavaScript

let video = document.getElementById("video")
let main_player = document.getElementById("main_player")
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

video.addEventListener('loadedmetadata', function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

video.addEventListener('play', function () {
    var $this = this; //cache
    (function loop() {
        if (!$this.paused && !$this.ended) {
            ctx.drawImage($this, 0, 0);
            var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
						var data = imageData.data;
            
            var r = 0;
            var g = 0;
            var b = 0;

            for (var i = 0, l = data.length; i < l; i += 4) {
              r += data[i];
              g += data[i+1];
              b += data[i+2];
            }

            r = Math.floor(r / (data.length / 4));
            g = Math.floor(g / (data.length / 4));
            b = Math.floor(b / (data.length / 4));
            
            main_player.style["box-shadow"] = "0 0 50px 0 rgb("+[r,g,b].join(", ")+")"

            setTimeout(loop, 1000 / 5); // drawing at 5fps so we dont make it heavy
        }
    })();
}, 0);