How to make turning a background image into a video background the same on all devices?

Question

css

Hello!
There is a block with a background image, which, during scrolling , is smoothly replaced by a video background and then "releases" the user to read the information further.
On a laptop, everything works well, but on large PC screens, the video does not have time to load and the first screen is hidden from view before a person has time to watch the video.
How to make it work the same way everywhere?
UPD: The example on the demo site does not really triple me that the scrolling starts right from the start, and does not occur with a delay after the appearance of the video background. e.preventDefault(); does not work on the scroll event, and as I wrote above: I want to achieve a cross-browser version with at least ie10+ support
Sample:

Answer 1

You can try to start scrolling on the playing event.
Here are all possible events that fire on media tags (audio, video)