AddThisFeature
Sign in

Sticky Video Player

A playing video shrinks into a corner when scrolled past and keeps playing.

moderate Media & Video

What it adds

A miniature docked player that takes over when the inline video scrolls out of view, with a close control.

What your agent is told to do

5
  1. 1

    Dock only when the video is actually playing and the original position has left the viewport, and undock automatically when the user scrolls back to it.

  2. 2

    Move the same player element rather than creating a second one. Two players means two audio streams the moment the timing is slightly off.

  3. 3

    Give the docked tile a visible close control and a way to jump back to the video in the page. Closing it must pause playback, not merely hide a video that keeps talking.

  4. 4

    Position the tile using the same layer and offset tokens as the app's other fixed elements, so it sits above the page but below anything modal.

  5. 5

    Do not dock on a paused video, on a muted background loop, or on a video the user has never interacted with. An element that follows people down the page uninvited is the behaviour ad blockers exist to remove.

Edge cases it handles

8
  • Detach only after playback has genuinely started. Docking a paused or never-played video puts a small black rectangle in the corner of the page for no reason.
  • Once the viewer closes the docked tile, remember that for the rest of the page visit. A player that re-docks on the next scroll is worse than one that never docked at all.
  • The corner is crowded. Check what else occupies it — sticky footers, chat launchers, cookie banners, toasts — and offset the tile or pick a different corner rather than covering a control the user needs.
  • Moving a video element in the DOM can reset it in some browsers. Capture the current time, playback rate, volume, and muted state before the move and restore them after, and verify the video does not restart from zero.
  • On a narrow screen a corner tile eats a serious share of the viewport. Either disable docking below a breakpoint or reduce it to an audio-style bar rather than shrinking a video until it is unwatchable.
  • Fullscreen and picture-in-picture must take precedence. Do not dock a video that the browser has already handed to another presentation mode.
  • The transition must respect reduced motion. Reuse the app's Reduced Motion Support so the tile appears without a flying animation when that preference is set.
  • The docked tile must be reachable by keyboard and its controls focusable, and it must not steal focus from wherever the user was reading.

Definition of done

9
  • A video docks only after playback has started and its inline position has scrolled out of view.
  • Scrolling back to the video returns it inline with playback uninterrupted.
  • Playback position, volume, and muted state survive the move in both directions.
  • Closing the tile pauses the video and suppresses docking for the rest of the visit.
  • The tile never covers sticky bars, chat launchers, cookie banners, or toasts.
  • Docking is disabled or reduced on small viewports.
  • Fullscreen and picture-in-picture sessions are left alone.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.