Sticky Text with Floating Video Frame

What You'll Create

Build a dramatic section in Squarespace with oversized sticky text and a floating video or image frame that scrolls over it. The headline stays pinned in the viewport while a rounded, bordered frame containing video or image content floats above the text. As you scroll, the frame moves while the text remains stationary underneath. It's that editorial, layered composition you see on high-end brand sites.

The Problem It Solves

Squarespace keeps background media behind content. You want a floating media frame that sits on top of text, creating depth and visual interest. Building this layered effect requires understanding z-index, overflow, and absolute positioning. This technique packages it into a section template approach.

Perfect For

Brand landing pages with video showcases, Product launch pages, Creative portfolio hero sections, Fashion or lifestyle brand headers, Any page wanting dramatic text/media layering

What Makes This Different

The text section stays in the viewport so the oversized headline (25vw font size, full-width) remains visible while you scroll. The media section below has a background video or image styled as a floating frame: 40% width, rounded corners at 30 pixels, and a 7-pixel white border creating that device-like appearance. The frame is positioned to overlap the text section above. The frame extends beyond section boundaries for seamless layering. On mobile, the frame expands to 80% width. Works with both video backgrounds and static images.

Details

  • Section Type: Fluid and Classic

  • Code Type: CSS

  • Prerequisites: Two sections: text section with headline, media section with background video/image. Classic editor uses content width values as selectors.

  • Toolkit Title: Sticky Text + Video Frame

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Previous
Previous

See-Through Sticky Text

Next
Next

Circular Gallery Marquee