InlineVideo
Full-width autoplay video
Preview
Behavior
| State | Behavior |
|---|---|
| In viewport | Autoplay, muted, loop, playsinline |
| Out of viewport | Paused (IntersectionObserver, threshold 0.2) |
| prefers-reduced-motion | Paused; shows the poster if there is one |
| No JS | The native autoplay muted loop attributes still apply |
Spacing
| spacing | Result | Use |
|---|---|---|
| prose (default) | space-2xl above and below | Inside prose: matches standalone images |
| none | No vertical margin | Standalone block; spacing is up to whoever uses it |
Constraints
- Always muted (a precondition for autoplay on mobile).
- Decorative: no controls, no PiP.
- Poster with
alt="": a visual fallback, not content. - No hardcoded colors; radius and spacing by token.
Decisions
| Decision | Why |
|---|---|
| Spacing as a prop, prose by default | prose.css doesn't target .inline-video; the margin lives here, but it can be overridden |
| Pause off-screen | An invisible loop burns battery and main thread for nothing |
| Respects prefers-reduced-motion | Motion is an accessibility matter; the static poster is the honest fallback |
| Muted, no controls or PiP | It is a moving image, not a player |