sticky

npm: @playerstack/plugin-sticky

When the user scrolls past the player while it’s playing, the plugin pins it to the bottom-right corner of the viewport. A close button lets the user dismiss the sticky state.

Quickstart

<player-stack
  src="https://example.com/v.mp4"
  data-config='{ "sticky": { "enabled": true } }'
>
</player-stack>

Config

config.sticky:

FieldTypeDefaultDescription
enabledbooleanfalsePlugin is a no-op unless true
thresholdnumber?0.1IntersectionObserver threshold β€” how much of the player must remain in view

Behavior

Styling

The plugin injects a default stylesheet (#playerstack-sticky-styles) once per page. Override the position:

.playerstack-sticky {
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  width: 320px;
}

Use case

Blog posts where the video is at the top β€” visitors keep watching while they read. Industry standard for content-heavy sites.

Events

None.