Add captions to a video on your website with WebVTT

The basic setup

Download the VTT from CueSprint and place it next to your video on your server. Then add a <track> element inside the <video>:

<video controls width="640">
  <source src="/media/demo.mp4" type="video/mp4">
  <track kind="captions" src="/media/demo.en.vtt" srclang="en" label="English" default>
</video>

• kind="captions" tells the browser these are captions for the dialogue.
• srclang and label name the language in the player's caption menu.
• default turns the track on when the video loads.

Things that commonly go wrong

• The track doesn't load: the VTT must be served from the same site as the page, or from a server that allows cross-origin requests. Serve it with the text/vtt content type when you can.
• Strange characters: keep the file in UTF-8, as CueSprint exports it.
• Captions don't appear on autoplaying, muted background videos: those videos usually have no controls; add default to the track, or burn the captions in with CueSprint instead.

Several languages

Add one <track> per language. Viewers choose from the captions menu of the player:

<track kind="captions" src="/media/demo.en.vtt" srclang="en" label="English" default>
<track kind="captions" src="/media/demo.es.vtt" srclang="es" label="Español">

To make the second file, translate the text lines of the VTT and leave every timestamp line untouched.

Style the captions

Browsers let you style WebVTT cues with the ::cue selector:

video::cue {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

The VTT from CueSprint has a timestamp before every word. Browsers that support the :past and :future pseudo-classes can use them for a karaoke effect, dimming the words that haven't been said yet:

video::cue(:future) {
  color: rgba(255, 255, 255, 0.5);
}

Support for these pseudo-classes varies between browsers; where it is missing, the caption simply shows as normal text. For a highlight that looks identical everywhere, export the MP4 with burned-in captions.

Accessibility and SEO

Captions make your video usable by deaf and hard-of-hearing visitors and by anyone watching on mute. The same transcript, published as text on the page under the video, also gives search engines words to index; see our guide on turning captions into content.