Auto Scroll to Next Video in RG

[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