One component for any embeddable media — a plain image, a native <video>, or a YouTube/Vimeo
URL (swapped for its embed/no-cookie iframe form automatically, from the URL alone — no separate
type prop to set). Always renders into a fixed-aspect-ratio box, so surrounding content never
reflows once the media itself loads in.
Deliberately not run through Dither/Halftone: this is for content that wants to look like an ordinary photo or video (a screenshot, a demo recording), not this system's own bitmap aesthetic — reach for those instead when the point is the dithered look itself.
tsx
%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2266%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2230%22%20r%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E)
<Media src="/screenshot.png" alt="A screenshot of the dashboard" aspectRatio="16 / 9" radius="m" />
<Media src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" alt="A talk" aspectRatio="16 / 9" />
<Media src="/demo.mp4" alt="A demo recording" controls />tsx
<Media alt="Demo gradient" src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2266%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2230%22%20r%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E" />alt
aspectRatio
src
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alt * | text | — | Accessible description (image `alt`) or accessible name (video/embed `title`) — required either way. |
| aspectRatio | text | "16 / 9" | — |
| autoPlay | boolean | — | — |
| controls | boolean | true | — |
| loop | boolean | — | — |
| muted | boolean | — | — |
| poster | text | — | Poster frame shown before playback. Native `<video>` only. |
| src * | text | — | An image URL, a video file URL, or a YouTube/Vimeo link — the element rendered is auto-detected from this. |