How to autoplay video when user reaches that section of the page?

Hi, i have a html embed code for a video hosted externally (not on youtube). i want to play it only when user has reached that particular part of the page.

The video html code looks like that:

<script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoObject","name":"ccaifrontpagemodeb","description":"","thumbnailUrl":[["https://video.gumlet.io/656213218536abcc89681cb7/6613f48d290080da99f970c7/thumbnail-1-0.png?v=1712583841790"]],"uploadDate":"2024-04-08T13:43:41.807Z","duration":"PT11.875S","embedUrl":"https://play.gumlet.io/embed/6613f48d290080da99f970c7"}</script><div style="padding:56.25% 0 0 0;position:relative;">
    <iframe loading="lazy" title="Gumlet video player" false src="https://play.gumlet.io/embed/6613f48d290080da99f970c7?preload=true&autoplay=true&loop=true&disable_player_controls=false" 
  style="border:none; position: absolute; top:0; left:0; height: 100%; width: 100%;" 
     
  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;" frameborder="0" allowfullscreen>
    </iframe></div>

So my question is how do I get it to only autoplay when user has scrolled to that section? Right now i have the option to “enable autoplay” in my video host and it autoplays immediately when page is loaded, but that aint exactly what I am looking for…

A particular reason you are using that embed instead of the video component?