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?

You're trying to make a section with a background video "stick" while scrolling, but it's not behaving correctly—especially on mobile view. This usually relates to how position: sticky works within Webflow and browser support across devices.

1. Use Sticky on the Section, Not the Video

• Always apply position: sticky to the section, not to the background video element.
• The background video itself is typically set to absolute or relative within the section to achieve full-cover layout; making that sticky won't anchor the section in place.

2. Set Sticky Correctly in Webflow

• Select the Section element in Webflow that holds the background video.
• In the Style panel, set:
• Position: Sticky
• Top: 0px (or a custom offset)
• Ensure the section's parent container has a defined height, or overflow: visible. Sticky won't work inside a container with overflow: hidden.

3. Understand Sticky on Mobile Devices

• Many mobile browsers (iOS Safari, Chrome on Android) have inconsistent support for position: sticky due to how they handle scrolling and viewport heights.
• Sticky positioning may not work as expected if:
• The mobile browser blocks it for performance reasons.
• The parent containers have conflicting overflow or height styles.
• The section is using 100vh and mobile browsers adjust this height dynamically (causing reflow issues).

4. Alternatives for Mobile

• Consider using scroll interaction animations instead of sticky positioning:
• Look under Interactions → While page is scrolling.
• Animate opacity, scale, or motion of the section or video for a similar “sticky” effect.
• You can also use a full-screen section with a delayed fade-out or scroll interaction to give the illusion of stickiness.

5. Cross-Check with Breakpoints

• In Webflow, switch to Tablet and Mobile breakpoints.
• Ensure the Sticky setting is applied consistently to the section in these views.
• Mobile-specific styles may override or disable sticky unintentionally.

Summary

Use position: sticky on the section containing the background video, not the video element itself. On mobile, sticky may fail due to browser limitations, parent container styles, or height constraints. For consistent cross-device behavior, consider animated scroll interactions instead of relying on sticky across all viewports.