Animated video backgrounds via a Web Component and ColorThief

Earlier this year, the epic ColorThief library had a pretty significant update. I blogged about a simple demo I built with it but I was fascinated by one particular demo on their site. The "observe" function in ColorThief lets you monitor a video source and grab the colors at a particular frame. Their demo uses this to create a lovely shadow background of the video. I believe some TVs have this feature as well, and honestly I'd worry that would get annoying, but the ColorThief demo was pretty cool, so I thought I'd try to build it with a web component. The idea would be - take any basic video element and wrap it like so: <video-bgshadow> <video controls width="250"> <source src="videos/flower.mp4" type="video/mp4"> </video> </video-bgshadow> The web component would then handle: Loading the ColorThief library Waiting for the video to be played Running the observe method and updating the CSS All in all, this wasn't too difficult. I don't think my shadow is as good as the demo (and I'm…