# Video as illustration — paired files, poster still

Learned 2026-08-27 from Resend's empty states.

- **Two elements, not two sources.** One `<video class="dark:hidden">` and one
  `<video class="hidden dark:block">`, each with its own file
  (`broadcasts-light.mp4` / `broadcasts-dark.mp4`). A `<source media>` swap
  would not survive a class-based theme toggle.
- **Attributes**: `autoplay loop muted playsinline preload="metadata"` and a
  `poster` pointing at a `.webp` still. The poster is what makes this safe —
  the frame is correct before the video decodes and stays correct if it never
  does.
- **Rendered far below intrinsic**: 120×120 on screen from 370×370 source,
  `object-contain pointer-events-none select-none`.
- **The cost is the point.** Twenty of these are 4849KB of a 5011KB page. A
  replica that draws a static icon where the original loops a video is not
  close, and one that inlines a GIF instead is worse on both weight and
  colour.