Auto Scroll to Next Video in RG

sethiamehul14 · 2025-01-29T04:45:00.972Z

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!

475303033_28421420017471330_6776737569958034134_n1600×868 290 KB

ZeroqodeSupport · 2025-01-29T15:37:41.924Z

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.

image1031×341 12.9 KB

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

image590×667 19.3 KB

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 · 2025-01-29T18:42:26.608Z

Thanks for the detailed solution.

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

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.

Screenshot 2025-01-30 at 12.10.01 AM2370×736 140 KB
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 · 2025-01-30T10:43:52.015Z

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?

image1905×537 143 KB

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

system · 2025-04-09T04:45:18.330Z

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