How to optimize video pasted as background?

Question

HTML

I insert a video clip through the video that will work as the background of the block. The video itself weighs 22 MB with a duration of 25-30 seconds. How is such videos uploaded to the user? With audio, for example, they are all downloaded to the client at once. It turns out that when loading the page, the user will start downloading as much as 22 mb. How do they cope with such a task? <video>

Answer 1

Reduce the bitrate and video resolution.
Move the metadata to the beginning of the mp4 container
Set preload="metadata"
htmlbook.ru/html/video/preload
To make the pixels not catch your eye, put a grid of small black dots on the video
https://jsfiddle.net/soumyabg/wefLyrhp/
css background dotted overlay