How to make a blur effect on a video?

Question

css

Hello everyone and Happy New Year!
On the site in the header, I added a background video that runs for 10 seconds and its quality is very poor. To hide the poor quality, I added a blur effect to the video using CSS. Because of this, the site began to slow down during scrolling and other animations.
Please tell me how to solve the problem with the brakes? Or maybe apply a blur effect directly to the video (using video editors)?

Answer 1

Blur the video itself in a video editor, and it will weigh less and will not create additional loads on the page rendering, and browser support will be a little wider.

Answer 2

or render-blur video on canvas

Answer 3

in fact, there are many editors who can do it. I use Movavi, one of the simplest editors. no manuals, no video tutorials needed - download and work. I’ve been working with wedding videos for a couple of years now and I come across quite capricious customers: do this, add that, it’s brighter there, it’s darker here .. Movavi helps to solve these issues quite quickly, which personally makes me very happy