Getting rid of a blurry Video Background

Webflow transcodes uploaded videos into mp4 and webm formats.

About the size (resolution/dimensions) of the video, it should be almost or the same as the original video’s aspect ratio.

ORIGINAL 3950KB > TRANSCODED 345KB (~90% reduction in file size)

After reducing quality and file size by ~90% via transcoding, the quality is further “reduced” by ~90% due to stretching the video three times the size of its container width and height using negative positions, so that it can fill the container:

Illustration:

There is no trick to make the quality better. I suggest you use a custom coded solution using the direct file you linked above as a workaround, if you think your visitors can afford to download a 4MB video file.

3 Likes