Play / Pause video when scrolled into view

Hello,
I have a video on a page with sound, I want it to only start playing when scrolled into view. I have tried multiple options with custom code and even a finsweet code but for some reason nothing works.

Can anyone let me know what I am doing wrong? Seems pretty simple but I really have trouble with it.


Here is my site Read-Only: [LINK][Webflow - LATENT]

The sound is the problem. Modern browsers have an “it’s complicated” relationship with autoplay due to abuses by marketers. A muted video will autoplay fine.

Otherwise there are only a few specific cases where autoplay with sound is permitted, and this varies by browser;

  • The user must have interacted with the page (e.g., by clicking somewhere on the page) before autoplaying with sound is allowed. I find it difficult to meet Chrome’s interaction requirements consistently. For example in an IFRAMEd youtube video, a button click to unmute and restart won’t work on Chrome. It might work with a video element directly.
  • Chrome allows autoplay with sound if the site has a high Media Engagement Index (MEI), meaning the user frequently consumes media on that site.
  • On mobile devices, autoplay with sound is often disabled unless the user adds the site to their home screen or the site is a Progressive Web App (PWA).
1 Like