SearchF
April 8, 2026/Simple/Scroll & Parallax

CSS Sticky Video

A video/image panel sticks at a calculated position near the bottom of the viewport while text scrolls alongside it. No JavaScript required — achieved with position:sticky and calc().

Live Demo ↗

Preview

We build things that move.

No-5 Studio is a motion-forward design studio based in New York. We work with ambitious brands who want websites that feel alive.

Our process starts with motion. Every project begins with an animation language — a set of principles that define how your brand moves through the digital world.

The result is a website that doesn't just look good. It feels good. It communicates confidence, craft, and intention.

We've shipped projects for fashion brands, nonprofits, agencies, and founders. Every one of them started with a conversation.

Source

import styles from "./styles.module.css";

export default function CssStickyVideo({ heading, body, videoPlaceholder = "#1a1a1a" }) {
  return (
    <section className={styles.section}>
      <div className={styles.text}>
        <h2 className={styles.heading}>{heading}</h2>
        {body.map((para, i) => (
          <p key={i} className={styles.para}>{para}</p>
        ))}
      </div>
      <div
        className={styles.videoSticky}
        style={{ backgroundColor: videoPlaceholder }}
        aria-hidden="true"
      >
        <div className={styles.videoLabel}>Video</div>
      </div>
    </section>
  );
}

Related Components

NEWTODAY
Exo Ape Play Reelscroll-parallax
NEW5D AGO
Garoa Video Scrollscroll-parallax
NEW5D AGO
Relai Parallax Scroll Heroscroll-parallax