HtmlHow-ToBeginner · 3 min read

How to Add Subtitles to Video in HTML Easily

To add subtitles to a video in HTML, use the <track> element inside the <video> tag. The <track> element links to a subtitle file (usually in VTT format) and specifies the language and kind of text, enabling subtitles to appear during video playback.

📐

Syntax

The <track> element is placed inside the <video> tag to add subtitles or captions. It has important attributes:

src: URL of the subtitle file (usually .vtt)
kind: type of text, e.g., "subtitles" or "captions"
srclang: language code of the subtitles, e.g., "en" for English
label: a user-friendly name for the subtitle track
default: optional, marks this track as the default subtitle

html

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

Output

A video player with English subtitles available and shown by default.

💻

Example

This example shows a video with English subtitles loaded from a VTT file. The subtitles appear automatically if the browser supports it.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video with Subtitles</title>
</head>
<body>
  <video controls width="600">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <track src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output

A 600px wide video player with English subtitles displayed during playback.

⚠️

Common Pitfalls

Forgetting to use the kind="subtitles" attribute can cause subtitles not to show.
Using incorrect or missing srclang makes it hard for browsers to select the right subtitle track.
Not providing a valid VTT file format will prevent subtitles from loading.
Placing the <track> element outside the <video> tag will not work.

Always test your subtitles in multiple browsers to ensure compatibility.

html

<!-- Wrong: track outside video -->
<track src="subs.vtt" kind="subtitles" srclang="en" label="English">
<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

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

Output

Only the second example correctly shows subtitles during video playback.

📊

Quick Reference

Attribute	Description	Example
src	URL of the subtitle file (.vtt)	subtitles_en.vtt
kind	Type of text track (subtitles, captions, descriptions)	subtitles
srclang	Language code of subtitles	en
label	User-friendly name for the track	English
default	Marks this track as default	default

✅

Key Takeaways

Use the element inside

Always specify src, kind, srclang, and label attributes for proper subtitle support.

Place the element inside the

Test subtitles in different browsers to ensure they display correctly.

Use the default attribute to show subtitles automatically on video load.