Forum Academy Marketplace Showcase Pricing Features

Playing a Video When It's In the Viewport and Stopping a Video When It's Not

Hi there. So I am wondering if anyone can help me figure out a small piece of Javascript for Bubble. I have a repeating group with an image in it. Each image plays a youtube video. I want the video to start playing when the user scrolls to it, stop playing when they scroll away, and then start playing the next video. This would be the same behavior as Tik Tok. I understand I am trying to change the video to be played or not played based on the viewport. I also get that this should be doable with a bit of Javascipt (but that is where things fall apart for me). I am guessing I need something similar to what is shown below (see the couple of HTML screens) , and an ID that matches (likely that also uses the index of the cell in part)… but again just don’t know enough. There is one paid plugin available in Bubble that would solve this, but would like a plugin free solution for the time being. Any help or suggestions would be greatly appreciated.

This topic was automatically closed after 70 days. New replies are no longer allowed.