What is the proper way to make the section with the Background video class stick for a longer time in Webflow? Should I add a sticky position to the background video or the section it is in, and why isn't it working on mobile view?

To make a section with a Background video stay visible longer while scrolling in Webflow, you’ll need to control its scroll behavior using position: sticky or interactions. However, sticky behavior and background videos have specific limitations—especially on mobile view.

1. Use Sticky on the Right Element

• Apply position: sticky to the Section, not the background video element itself.
• This is because sticky elements work relative to their parent containers and the scroll parent, and the section is usually the container in the layout.
• Ensure the section has a defined height and doesn’t overflow its parent.

2. Apply Sticky Correctly

• Select the section containing the Background video.
• Set Position → Sticky in Webflow’s Style panel.
• Set a top offset (e.g., 0px) so it defines when the section becomes sticky.
• Make sure the parent element is tall enough to let sticky behavior trigger. If the parent is not taller than the sticky element, it won’t work.

3. Use Scrolling Interactions for More Control

• If the goal is to have the section appear to “pause” or “stick” during scrolling, you might benefit more from using Webflow Interactions → While page is scrolling.
• You can pin the section in place and trigger timeline animations or transitions.

4. Why It Doesn’t Work on Mobile

• position: sticky has inconsistent behavior on mobile browsers, particularly when the device uses momentum-based scrolling.
• Additionally, mobile views often have different layout constraints (e.g., smaller height, touch scrolling), which break the sticky logic.
• Fixes:
• Check if the sticky section is being constrained by a parent with overflow: hidden or auto—this disables sticky behavior.
• Test responsiveness: ensure sticky top offset doesn't clash with smaller viewports.
• Sometimes using scroll interactions is more reliable than relying solely on native CSS position sticky on mobile.

Summary

To make a background video section stick longer, set position: sticky on the section, not the video. Mobile issues usually arise due to browser quirks or conflicting layout styles, so test thoroughly and consider using scroll-based interactions instead for consistent cross-device behavior.