Play video in Repeating Group when in ViewPort

Need help
1

Hi, so I’m experimenting with bubble and I wanted to try to create sort of a YouTube Shorts type feature that allows users to scroll vertically through a collection of videos. The videos will have scroll snapping and should play only when in the viewport.

So far I’ve achieved the vertical scroll snapping in my RepeatingGroup and I have the videos on autoplay however I cannot seem to get the play only on viewport working.

I have implemented my video player using the HTML element. I’ve tried leveraging the JavaScript Intersection Observer API to implement the play on viewport with no success.

You can see here for reference:

I’m reaching out to the Bubble community to see if you guys have an ideas on how to achieve this functionality. I’m hoping to get this working with vanilla JavaScript because I think its possible to achieve. Any feedback will be very helpful!

I’ve also pasted in the link to what the project currently looks like:

3

Hi @ethan1 Ethan - I believe I have a similar app to yours with the snapping and viewing part working. I just have the trouble of vides in the “background” playing simultaneously, have you figured this out? Could share my app link too if you wanna take a look

Joel

4

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