Video Backlight
The video's colours will bleed in a blurred and faded method around the edges mimicking a backlight.
Thanks to @wesbos on X for publishing his technique using SVG blur and saturation values onto an element. This looks best on dark backgrounds with bright videos. I have changed the values to better work with animated videos.
January 25, 2025: Changed blurred
to blur
and added in2
on feComposite
to make it HTML valid.
Place the SVG file inlined on the back you want the effect.
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="blur-and-scale" y="-50%" x="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="40" result="blur" />
<feColorMatrix type="saturate" in="blur" values="1" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</svg>
CSS code
video {filter:url(#blur-and-scale);}