Input HarborISSUE #23 of 46

video · controls · poster · tracks

FormaVSCaptain Invalid Input

Forma saysVideo attributes shape playback: controls, autoplay, muted, loop, poster, and <track> captions for accessibility.

Tune <video> with attributes. poster is the thumbnail shown before play. autoplay only works if also muted (browsers block sound-on autoplay). loop repeats; playsinline stops iOS from going fullscreen.

For accessibility and SEO, add a <track kind="captions" src="…vtt"> — a WebVTT file of timed captions. Captions aren't optional for real content; they're how deaf users and noisy-room users follow along.

Power-ups you unlock

poster = pre-play thumbnail
autoplay needs muted to be allowed
playsinline avoids forced fullscreen on iOS
<track kind="captions"> adds WebVTT captions

Captain Invalid Input attacks — common mistakes

Expecting autoplay with sound (browsers block it)
Shipping video with no captions track
Loop + autoplay + sound = an angry user hunting for mute

Boss battleConfigure a muted autoplay loop with a poster, then add a captions <track> pointing at a .vtt file.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;display:grid;place-items:center;height:100vh;margin:0">
  <video controls autoplay muted loop playsinline width="320"
         poster="https://via.placeholder.com/320x180">
    <source src="clip.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
  </video>
</body></html>

▶ Open the interactive comic issue

‹ Media · Video · Audio · Sources Audio · Formats · Streaming ›