# Media skeleton

Media skeleton: a free component, built on your design tokens, to use for a video, photo or embed whose file arrives after the page. A video or photo block that reserves its exact frame, title and caption while the media loads, so nothing below it moves.

Prompt: Add the OpenDesigner component skeleton-media to this project: https://opendesigner.dev/library/skeleton-media.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: loading, loaded, reduced motion.

Accessibility: While loading, the content area is aria-busy and inert, so nobody can tab into placeholders; a polite status says when loading starts and when it is done. Under reduced motion the bones stay still.

File: https://opendesigner.dev/library/skeleton-media.html

Catalog entry (parts, data limits, states, tokens): https://opendesigner.dev/library/skeleton-media.json

Download: `curl -fsSLo skeleton-media.html https://opendesigner.dev/library/skeleton-media.html`