Skip to content

How to Add and Customize Closed Captions and Subtitles for Videos in HTML5

HTML5 closed captions: Example of HTML5 markup

HTML5 is a very flexible markup language that lets you design your web pages with a lot of freedom – provided you know what to do. With that said, HTML5 video closed captioning does involve a complex process to get right. However, adding subtitles to your videos reaps so many benefits that it’s worth learning to do it in HTML5. With enough time, as long as you know what to add in your markup, adding captions to your videos can be a cakewalk.

Here’s how you can add and customize closed captions for your videos in HTML5:

1. Transcribe your videos

Having a transcript beforehand makes it easier to caption your HTML5 videos later on.

Here’s a simple step-by-step process of creating your transcript:

  1. Open a media player and the word processor of your choice.

  2. Play your video and transcribe each line, including their respective timestamps

  3. If necessary, play the video again and correct any errors in your transcript 

2. Save your transcript in the correct file format

With HTML5 videos, the correct file format for captions is WebVTT which requires a specific format to process your captions. The format is:

  • Start timecode – -> End timecode (hours:minutes:seconds.milliseconds or minutes:seconds.milliseconds if the video is less than an hour long)

  • Speaker line

  • Comment; this is optional and cannot be seen by the viewer

Here’s an example:

01:05:30.00 – -> 01:05:40.00

It took the team a couple of months to finish, but it was all worth the effort.

NOTE There is some crosstalk in the background, which is irrelevant to the video.

You must do this for every line in the transcript.


Alternatively, you can use an automated transcription service like FreeTranscriptions! to create your WebVTT caption file quickly and free of charge.

3. Uploading your video and the caption file

In order for your HTML5 code to play the video, you must upload both the video and the caption file you have created to your server.

Keep in mind that some video formats may be incompatible with certain browsers. To avoid this issue, try to upload your video in multiple video formats.

4. Creating the HTML5 markup for subtitles

Before adding the subtitles, your current markup should look like this:

<video id=”video_x” controls=”controls” width=”y” height=”z”><br />

<source src=”video_x.mp4″ type=”video/mp4″ />


Some of the parameters you need to consider are:

Under the <video> tag

  • id: Your designated name for your video within the HTML code for easier reference within the HTML code

  • controls: If present within your <video> tag, it enables the built-in controls of the HTML video player

  • width and height: The dimensions of the video on the web page

Under the <source> tag

  • src: The filename of the video you want to embed (must be uploaded on your server)

  • type: The file extension of your video (e.g., if mp4, must be “video/mp4.”)

To add basic subtitles for your HTML5 video, it must have the <track> tag before your </video>. It should look like this:

<video id=”video_x” controls=”controls” width=”y” height=”z”><br />

<source src=”video_x.mp4″ type=”video/mp4″>

<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt”>


These are the essential <track> parameters you need to know:

  • label: Name of the track; often, this is the name of the language of the captions

  • kind: Type of track to be shown, either “subtitles” or “captions”

  • srclang: Abbreviated language of the track

  • src: File path of your subtitle track either on your server or in your local drive

Make sure that your .vtt file is uploaded into your server database and that the name designated under the “src” parameter matches exactly the name of your .vtt file.

If you have more than one subtitle file with another language, add another <track> tag with the appropriate parameters.

5. Designing the font style of your HTML5 video subtitles

It’s possible to change the style of your subtitles in HTML5. You simply have to add <style> tag before </video>, and indicate the parameters that you want to change in your font. All HTML5 font parameters are applicable here, so your style options can be quite flexible.

Here are some basic parameters you can try out for starters:

  • background-color: Color of the background of the subtitles

  • color: Color of the subtitle font

  • font-size: Size of the subtitle font

  • font-family: Font type of the subtitles

  • opacity: How transparent/solid the track is

For example, if you want your subtitles to be slightly transparent with a light gray Helvetica 16 point font and a gray background, this is what your markup should look like:

<video id=”video_x” controls=”controls” width=”y” height=”z”><br />

<source src=”video_x.mp4″ type=”video/mp4″>

<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt”>


#video_x::cue {

background-color: A9A9A9

color: D3D3D3

font-size: 16px;

font-family: “Helvetica”;

opacity: 0.75;




Alternatively, you can stick with the default font options for the subtitles in HTML5. To do this, simply add the “default” parameter at the end of your <track> subtitle:

<track label=”English” kind=”subtitles” srclang=”en” src=”video_x_subtitles.vtt” default>


Adding subtitles to your videos in HTML5 is easy, but creating those subtitles from scratch is incredibly tedious. Perhaps you’d like to explore ways to keep the process simple and easy. Consider using a machine transcription service like FreeTranscriptions! for a faster and easier way to create your subtitles.