Hi! , I'm Nate, a Software Engineer at Culture Amp. This content isn't directly related to the work that we do at Culture Amp, it's more something on the side that I found interesting from a frontend perspective and that I hope you do too. Anyway, roll the intro! ## Intro I noticed the other day while watching a YouTube video, around the edge of the video there was a subtle glowing effect that matched the content of the video. ![Image A YouTube video showing it's glowing border. The glowing border is indicated by the words "Dat Glow"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2lft5qigaf2fv06uipf.png) It's probably inspired by the recentish trend to put LED light strips on the back of your TV. The fancy version of this syncs the light colours to what's playing on your TV. ![Image A TV with Multicoloured wall lighting behind it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tom3yidgkplq58pyqhvp.png) In it's simplest form, it's supposed to reduce eye strain and help improve the perceived contrast of the screen. In the more complex form it could improve the immersion of the video by allowing it to escape it's box. Or it just looks pretty because colours. ## Table Of Contents - [Investigate](#investigate) - [How it's done](#how-its-done) - [Example](#example) ## Investigate Back on YouTube, I was wondering how they achieved _their_ glowy effect. **Let’s dig in and see**. Start by moving the video out of the way. ![Image When you move the YouTube video out of the way, you can see a full frame blurred image underneath](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9enm6ai3a6wxz1zn34g.gif) When we do this we can see that under the video is what _appears_ to be a **blurred** version of the current place in the video. It sits under the video, with the blurred edges peeking out giving this pretty soft glow effect. > When you blur an image, depending on the method, it becomes larger due to the mixing of the pixels at the edges with the surrounding canvas and the overall softening effect. {% codepen https://codepen.io/diffidentDude/pen/JjmWvdw %} An inspection of the DOM shows some **canvas** elements being actually responsible for displaying the blurred content. ``` html

``` If we unroll the elements, we can see the arrangement. The previous frame, the next one and the actual video. ![Image The YouTube video from earlier, with the two canvas elements unrolled so that they can be viewed separately](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2v01zri4j3fbliyn26f.png) A couple of observations so far. 1. The blurred “frame” doesn’t update at the same rate as the video, every now and then it’s a little out of sync. This isn’t a problem for the effect as it’s in the background anyway. 1. The image alternates between the two canvas elements, swapping back and forth with a simple crossfade between them every 10ish seconds. 1. Because it’s canvas, this must be some kind of programatic rendering with javascript. I still have questions though. **Let’s dig deeper** ## How it's done After digging though the code a bit, I found the javascript driving the canvas and this very quickly revealed a couple of things. > It's interesting to note that for this simple effect, there are no libraries in use here. This is possibly to keep the frontend lightweight. There is an matrix of images used to create the blurred backgrounds. In the case of long video’s there are several matrixes of 10x10 images like the below. ![Image A matrix of YouTube video thumbnails arranged into a 10x10 grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3707a6ytywywf217py4.png) Each time the video playback changes, an event is fired and the background images are updated by looking them up in the matrix and selecting which frame to crop out of it. The cropped image is rendered onto the canvas, then a blur is applied. Animations are used to alternate between in incoming canvas with the new background image and the previous canvas with the old background image. **Neat**. ## Example I built a simple version of it using one of the matrixes to show how the effect can be achieved. {% codepen https://codepen.io/diffidentDude/pen/bGmBJKK %} If you're curious as to the video I was watching while writing this, I've added it below. {% youtube https://www.youtube.com/watch?v=R_g4nT4a28U %}

diffidentdude

Analysis: The YouTube video glow

Join Our Newsletter. No Spam, Only the good stuff.