InlineVideo
Vídeo autoplay a ancho completo
Preview
Comportamiento
| Estado | Comportamiento |
|---|---|
| En viewport | Autoplay, muted, loop, playsinline |
| Fuera de viewport | Pausa (IntersectionObserver, threshold 0.2) |
| prefers-reduced-motion | Pausa; muestra poster si existe |
| Sin JS | Atributos nativos autoplay muted loop siguen aplicando |
Spacing
| spacing | Resultado | Uso |
|---|---|---|
| prose (default) | space-2xl arriba y abajo | Dentro de prose: iguala imágenes standalone |
| none | Sin margen vertical | Bloque suelto; el spacing lo controla quien lo usa |
Restricciones
- Siempre muted (precondición del autoplay en móvil).
- Decorativo: sin controles, sin PiP.
- Poster con
alt="": es fallback visual, no contenido. - Sin colores hardcodeados; radius y spacing por token.
Decisiones
| Decisión | Por qué |
|---|---|
| Spacing como prop, default prose | prose.css no apunta a .inline-video; el margen vive aquí, pero es overridable |
| Pausa fuera de pantalla | Un loop invisible gasta batería y main thread para nada |
| Respeta prefers-reduced-motion | El movimiento es accesibilidad; el poster estático es el fallback honesto |
| Muted, sin controles ni PiP | Es una imagen en movimiento, no un reproductor |