Auto Scroll to Next Video in RG

[sethiamehul14]

Hey, need help!!!

We have a YTshort/Insta reel like feature wherein the video autoplays indefinitely. Its an RG.

I am using VideoPlayer plugin by zeroqode for this.

I want to automatically move to the next index or next video when the current video plays till the end or finishes playing. We would also like the ability to see the number of the active cell [video] and the ability to move to the next or return to the previous one. How do i implement this?

Have explained the issues and requirements here: Feed

I have tried a combination of JS code and Javascript to Bubble trigger, but it is not recognizing the code.

@ZeroqodeSupport @ZeroqodeTeam @levon pls help!

TIA!

[ZeroqodeSupport]

Hi @sethiamehul14 ,

Thanks for reaching out!

To switch to the next video when the current one finishes playing, use the event:
“When Video Player ends” → Trigger Play Next Video workflow action.

Scroll Detection Workaround

For a scroll-based navigation system, follow these steps:

Add an Input Field

• Add an input field (set minimal height/width) and give it an ID (e.g., scroll_action_input).
• Note: The input element should be visible on the page.

Implement Scroll

• Insert the following script in Settings → SEO/Metatags → Script in the body:

<script>
document.addEventListener("DOMContentLoaded", function () {
    console.log("✅ Scroll detection script loaded!");

    let scrollCooldown = false;

    document.addEventListener("wheel", function(event) {
        if (scrollCooldown) return;
        scrollCooldown = true;

        let scrollInput = document.getElementById("scroll_action_input");
        if (!scrollInput) return;

        let threshold = 30;
        let direction = event.deltaY > threshold ? "next" : event.deltaY < -threshold ? "prev" : "";

        if (direction !== "") {
            scrollInput.value = direction;
            scrollInput.dispatchEvent(new Event('input', { bubbles: true }));

            setTimeout(() => {
                if (scrollInput.value === direction) {
                    scrollInput.value = "";
                    scrollInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
                scrollCooldown = false;
            }, 1500);
        } else {
            scrollCooldown = false;
        }
    }, { passive: false });
});
</script>

Note: The provided JavaScript is optimized for debugging, so you can better understand what’s happening in the console. You’ll see logs indicating when the script is loaded and when a scroll event is detected.

Create a Workflow to Detect Scroll Changes

• In Bubble Workflows, set up conditions:
  “Do when Input’s value is ‘next’” → Play Next Video
  “Do when Input’s value is ‘prev’” → Play Previous Video
  
  

---

Additional Resources

Feel free to explore the test page and documentation for a detailed walkthrough and better understanding of the setup.

• Test Page: View Example
• Plugin Documentation: Plugin Docs

Looking forward to your feedback.

Regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[sethiamehul14]

Thanks for the detailed solution.

Further on this, i want to be able to do a couple more things:

1. When it auto scrolls to the next video, the next video should autoplay. I tried doing this using the available action “Play New VideoPlayer”, but it doesnt seem to work.
   

   

2. I want to have the ability to swipe up or down when holding the left key in mouse in desktop. I want to be able to have the swap animation here so that it doesnt keep scrolling and stops after every 1 scroll [like in YT shorts or Instagram reels]

How do i get to do these? @ZeroqodeSupport

[ZeroqodeSupport]

Hi @sethiamehul14,

Thank you for your message!

For the “Play New VideoPlayer” action, could you please try opening the debugger and confirming if the event “When condition is true” is being triggered?

It seems like the condition might not be met. For testing purposes, we highly recommend creating a clean page with a simple condition to better understand how it works. You can also check out our documentation for more details on this workflow action:
Video Player Plugin Documentation

Regarding your second request, as demonstrated in the previous example, you can achieve this effect using a JavaScript script. However, please note that we provide general support related to plugin issues and fixes. If you need assistance with plugin or app customization, you can read more about how our customization services work here:
Zeroqode Development Services

For reference, you can explore some of our completed projects:
Our Portfolio

You can also see what our customers say about working with us:
Reviews

If you’re interested in customization assistance, please send us a request with your project details, and one of our managers will get back to you:
Get Started with Zeroqode

Let us know how you’d like to proceed!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble