Video Embed Pause on Scroll

Hello!

I have embedded three videos into my homepage. I want them pretty much the way they are, but I was wondering if anyone knows how I could adjust the code to make each video play only when it’s in view and pause when it’s not in view. So you scroll, the first video starts playing, you scroll further down, the first video stops playing, the second one (that’s in view) starts playing. You scroll back up to the first one it goes from pause to playing again (from the beginning of the video).

If anyone knows how to do this, please let me know.

I am assuming the “playsinline data-keepplaying” in the embed code is what needs to be adjusted.

Thank you!

https://preview.webflow.com/preview/better-life-123456?utm_medium=preview_link&utm_source=designer&utm_content=better-life-123456&preview=cbc93644f9f04da793e1be67a17a2659&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi,

if you put an ID to your bg video you can use the following script to remove the attribute

<script type="text/javascript"> 
document.getElementById('YOURID').removeAttribute("data-keepplaying"); 
</script>