Start movie when scroll down

Hello

As you can see in the demo link, once the user starts scrolling the Hero section fades out and a movie appears.

But the problem is that the movie starts playing once the page is loaded and I’d like that it would only start playing when the user starts to scroll, or eventually, after the user scrolls a certain amount of pixels.

I’ve been trying this tip, Playing a Vimeo video on scroll, but I can’t get this to work.

Is there any tutorial or anyone can help me?

Thanks in advance,
Maurício

Here is my public share link: https://preview.webflow.com/preview/visaopura?utm_source=visaopura&preview=ff67962eb5df9bed24e61cb3b7bd4c2c

Here is my public share link: LINK
(how to access public share link)

This is my past answer/example for viemo (and viemo only). Do you try to work with viemo or other platforms?

Anyway please add live url (for the page with the video) and read-only link.

If you work with viemo i give you step by step instructions (the other answer is for user who knows code - so the answer was very short)

YouTube solution is almost the same (another api)

Hello @Siton_Systems ,
The read-only link: https://preview.webflow.com/preview/visaopura?utm_source=visaopura&preview=ff67962eb5df9bed24e61cb3b7bd4c2c

In fact I’d like to know how to do with vimeo movies, but also with youtube or even embedded movies, because probably the movie will be hosted by the client and not in a movie platform like vimeo or youtube.

Thanks for any help you can give.

mmm sorry this is more for a freelancer job (Youtube API is more complex combine with another JS libary). the “also” is little problematic (But any dev / or me - can use my codepen as starter point) + how the client will add videos (By CMS is more compex code and ideas like this).