I have a simple web page with a video inside, I would like that when you scroll to the div containing the video the scroll would be deactivated and replaced with the video controls (if I scroll down the video plays on 1 frame per scroll, if I scroll up the video reverse). Obviously if the video ends the scroll must reactivate and continue to the bottom of the page (same thing if I send the video back to the beginning). This is the video in question:

    <div id="bound-one" class="scroll-bound">
        <div class="content">
            <video id="video1" width="100%" muted preload >
                <source src="video.mp4">
      </video>
        </div>
    </div>
</div> ```