Embedding Subtitles in HTML5 Video with the <track> Element

Quick solution

To display subtitles with an HTML5 <video> element, nest a <track> element that points to a WebVTT file. The browser loads the file, parses its time‑coded cues and shows them in sync with playback.

How it works

The <track> element describes a timed text track. When the video starts, the user agent fetches the referenced WebVTT resource, interprets each cue (start time, end time, text) and renders the text inside the video’s shadow DOM. Appearance can be adjusted with the CSS pseudo‑element ::cue.

Worked example

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs.vtt" srclang="en" label="English" default>
</video>

Place a valid subs.vtt file next to the HTML page. A minimal VTT looks like:

WEBVTT

00:00:05.000 --> 00:00:07.000
Hello world.

00:00:08.500 --> 00:00:10.000
This is a subtitle.

Limits and common pitfalls

• MIME type – the server must serve the .vtt file with Content-Type: text/vtt. An incorrect type (e.g., text/plain) causes the track to fail silently.
• CORS – if the VTT file resides on a different origin, the server must include appropriate Access-Control-Allow-Origin headers; otherwise the browser blocks the request and no subtitles appear.
• Styling inconsistency – while ::cue is widely supported, exact rendering (font size, background) varies between Chrome, Firefox, Safari and Edge. Test in each target browser.
• Legacy browsers – Internet Explorer 9 and earlier do not recognize <track>. For those users provide a fallback such as a JavaScript polyfill (e.g., Track.js) or burn‑in subtitles.

Verification steps

1. Save the HTML example as index.html and the VTT snippet as subs.vtt in the same directory.
2. Open index.html in a current browser (Chrome, Firefox, Safari, Edge).
3. Click the CC button in the video controls and select “English”. Subtitles should appear at the times defined in the VTT.
4. Open the browser’s developer tools, go to the Network tab, reload the page and verify that the request for subs.vtt returns HTTP 200 with Content-Type: text/vtt.
5. In the Elements tab, add a rule such as video::cue { color: #ff0; background: rgba(0,0,0,0.6); } and confirm the subtitle text changes immediately.

If subtitles do not show, check the console for network errors, confirm the MIME type and CORS headers, and ensure the VTT syntax is correct (no BOM, proper line endings).