Function
The lesson's thumbnail, when it declares one
A decorative overlay covering the player's frame
The frame reserves its space from the first paint — its 16:9 box resolves
server-side and never shifts — but the markup inside it arrives empty: the
provider's <iframe> has no source yet, Vidstack sets the poster's src
client-side only, and the layout element carries no controls until the bundle
hydrates and the embed loads. What the learner gets in the meantime is a flat
black rectangle, which on a slow connection is the longest-lived state of the
page — and a black rectangle does not say "loading", it says "broken".
This dresses that window. It is rendered by
PlaybackPositionedVideoPlayer as a sibling of the player, so it ships
inside the server-rendered HTML; a placeholder mounted from the player's
children would arrive only once the player did, which is the very gap being
covered.
The lesson's own poster is used where there is one. It is a path this app
already serves, and showing the actual frame of the actual lesson beats any
shimmer. The silhouettes go over it regardless, because a poster on its own
reads as a still image rather than as a player that is coming. A lesson with
no poster gets those same silhouettes over a Skeleton fill.
Purely decorative: aria-hidden, no focusable descendant, and
pointer-events-none so no tap meant for the player is swallowed on its way
through.
What the lesson's video frame shows while the player is still booting.