« Return to all how-to guides

How to Add Closed Captions & Subtitles to HTML5 Videos

How To Add Captions & Subtitles to HTML5 Videos: Free Guide

Adding closed captions to your videos in HTML5 isn’t hard. Let’s break it down into 3 simple steps:
HTML5 logo

1. Get a WebVTT Caption File for Your Video

Videos display closed captions by referring to an accompanying caption file, which contains text of speech and sounds with corresponding timestamps.

Caption files come in many different formats.

WebVTT (.vtt) is the format of choice for HTML5 video.

A WebVTT file looks something like this:

00:00:10.500 --> 00:00:13.000
NARRATOR: In a world where nothing is what it seems,

00:00:15.000 --> 00:00:18.000
one man is about to do the impossible.

Pro tip: While you can create a WebVTT caption file yourself, the easiest way is to submit your video for transcription and captioning to a professional captioning company.

2. Upload Caption File to the Same Folder as Your Video

When your website plays a video, it references a specific video file that is stored on your website’s server. Save a copy of your WebVTT caption file in the same folder where your video is stored.

3. Add a Track Element to Your Video’s HTML Code

Open up your website’s HTML editor and view the code for the video that needs captions.

Add a track tag with the following information:

  • src – the URL location of the caption file on your server
  • label – the title of the track as it displays for the viewer
  • kind – the type of time-aligned text. The options are captions, subtitles, chapters, descriptions, or metadata.
  • srclang – the language
  • default – makes this track enabled by default. Note that multiple track elements can be used simultaneously.

Here’s an example of a video with track tags. The first tag is for closed captions, which are the default. The second tag is for French subtitles:

<video  width="320" height="240">  
     <source type="video/mp4" src="/my_video_file.mp4" >   
     <track src="/captions_file.vtt" label="English" kind="captions" srclang="en-us" default >
     <track src="/French_captions_file.vtt" label="French" kind="subtitles" srclang="fr" >


Save your changes and update your webpage.

The video should now display a CC symbol in the controls. You can click on this to display the text track options and toggle captions or subtitles on and off.

video controls displaying CC option

For a shareable, printable PDF version of these instructions, click the image below:

How To Add Captions & Subtitles to HTML5 Videos: Free Guide
Interested in Learning More?