feat(packages): add poster placeholder blur-up pattern

[ronald-urbina]

Add the poster placeholder blur-up pattern. Displays a low-resolution image behind the poster with a blur effect while the full poster loads matching the API established by Media Chrome (placeholdersrc) and Mux Player (placeholder).

both default and minimal skins render the placeholder via ::before with filter: blur(). The React variant fades in via an opacity transition keyed on data-visible; the HTML variant applies blur directly on media-poster::before.

Accepts a URL or data URI (inline blurhash output).

Closes #1438

---

Note

Low Risk
Optional presentation-only UI and CSS; no playback, auth, or data-path changes beyond new public props/attributes.

Overview
Adds blur-up poster placeholders so a low-res image can show behind the full poster while it loads, aligned with Media Chrome placeholdersrc and Mux Player placeholder.

React exposes an optional placeholder prop on Poster, BaseVideoSkinProps, and all default/minimal video and live skins (CSS + Tailwind). When set, skins apply --media-poster-placeholder on the container; default/minimal skins draw a blurred ::before layer that fades in only when the poster <img> has data-visible (avoids flashing blur after playback starts). Poster can also set the same variable on the image when used standalone.

HTML adds placeholdersrc on PosterElement and SkinElement, mapping attribute changes to --media-poster-placeholder. Skins use media-poster::before for the HTML path.

Sandbox adds getPlaceholderSrc (Mux thumbnail with ?width=20) and usePlaceholder for demo wiring. An internal design note documents behavior, CSS variables, and accessibility (decorative only).

^{Reviewed by Cursor Bugbot for commit fe81cae. Bugbot is set up for automated code reviews on this repo. Configure here.}

[netlify]

👷 Deploy request for vjs10-site pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	fe81cae

[vercel]

@ronald-urbina is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 4baad83. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 10, 2026 3:59am

[sampotts]

I checked out the preview and used network simulation as Slow 4G but it looks like it's just waiting and pulling down the full size image?