Blog chevron right Subtitles

How to Create a Web VTT File for Your Videos

Christopher Nguyen
Christopher Nguyen
Posted in Zoom Sep 6 · 6 Sep, 2022
How to Create a Web VTT File for Your Videos

What Is a WebVTT File and Why Do You Need It?

A WebVTT file, with the .vtt extension, is a type of caption and subtitle file used for videos. WebVTT stands for Web Video Text Track, and it works to display text such as captions, subtitles, and descriptions during video playback. The WebVTT format was first introduced in 2010 by the Web Hypertext Application Technology Working Group (WHATWG) to support text tracks in HTML5 videos.

  • WebVTT files improve video accessibility for people who are deaf or hard of hearing.
  • They provide translations and subtitles for multilingual audiences.
  • WebVTT enhances SEO by making video content searchable by search engines (W3C, 2019).

Using captioning services makes your content available to a wider audience while meeting accessibility standards like ADA and Section 508.

WebVTT vs. SRT: What Are the Differences?

Both WebVTT and SubRip Subtitle (.srt) formats are popular for captions and subtitles. However, they have distinct features:

  • WebVTT supports extra features like text positioning and style settings. SRT does not.
  • WebVTT requires UTF-8 encoding, while SRT does not have this requirement.
  • WebVTT uses periods in timecodes (e.g., 00:01:00.000). SRT uses commas (e.g., 00:01:00,000).
  • WebVTT allows optional cue identifiers; SRT uses numbers to mark each caption.
  • Every WebVTT file starts with the line “WEBVTT”; SRT starts with the caption number 1.
  • WebVTT supports metadata and comments within the file. SRT does not allow metadata (W3C, 2021).

For more on SRT format specifics, the SRT format documentation provides further details.

The Structure of a WebVTT File

WebVTT files have required and optional parts. Here’s how the format works:

Required Elements

  • The first line of the file must be WEBVTT.
  • Each caption sequence in the file ends with a blank line to indicate separation.

Optional Elements

  • Information about text placement or style appears after the second timecode on the same line.
  • A sequence number can organize captions but is optional.
  • You can add comments for reference by starting a line with NOTE.
  • A header after WEBVTT can describe the file, indicated by “-->”.
  • UTF-8 encoding is indicated by a Byte Order Mark (BOM) of EF BB BF, if present.

Each caption sequence is formatted using the following rules:

  • Timecodes are written as hours:minutes:seconds.milliseconds or minutes:seconds.milliseconds.
  • Timestamps use “-->” to separate start and end times (e.g., 00:00.000 --> 00:05.550).
  • Blank lines only separate sequences, never occur within a caption.
  • Comments can appear anywhere and are not shown to viewers.
WebVTT file structure

How to Create a WebVTT File: Step-by-Step Guide

You can make a WebVTT file using any plain text editor. The steps are slightly different for Windows and Mac users.

For Windows Users

  1. Open Notepad or any text editor.
  2. Type WEBVTT on the first line. Press Enter twice to add a blank line.
  3. Write a timecode in the following format: 00:00.000 --> 00:05.550.
  4. Optionally, add a sequence number or cue settings above the timecode.
  5. Type your caption text on the next line. Keep each caption to two lines of up to 32 characters each for best readability.
  6. After each caption, press Enter twice to add a blank line before the next sequence.
  7. Repeat these steps for all captions until your transcript is complete.
  8. Click File > Save. Name the file with the .vtt extension, set Save as Type to All Files, and save.
Notepad for WebVTT

For Mac Users

  1. Open TextEdit and create a new file.
  2. Follow steps 2–6 above for entering your captions and timecodes.
  3. Go to Format > Make Plain Text or use Shift + Command + T.
  4. Click File > Save. Enter a name for your file with the .vtt extension.
  5. Make sure “If no extension is provided, use .txt” and “Hide Extension” are unchecked.
  6. Click Save.
TextEdit for WebVTT

Your WebVTT file is now ready to be uploaded.

Uploading a WebVTT File to Video Platforms

The upload process will vary depending on your video hosting platform or media player. Most major platforms, such as YouTube, Vimeo, JW Player, and Brightcove, have an option to add caption files to videos.

  • Go to the video settings or captions/subtitles section.
  • Select “Add captions” or “Upload subtitle file.”
  • Choose your saved .vtt file and upload it.
Uploading VTT file

How Long Does It Take to Create a WebVTT File?

  • For a 5-minute video, an experienced transcriber might spend about 30 minutes creating accurate captions (2023 industry estimate).
  • If you are new to captioning, expect it to take longer, especially when adding custom timecodes or cue settings.
  • Manual work can become time-intensive for longer videos or complex projects.

If you need fast captioning, automated transcription or professional closed captioning services can save time and improve accuracy.

Why Choose GoTranscript for WebVTT Captions?

Making high-quality WebVTT files ensures your videos are accessible and meet compliance standards. However, manual transcription can be slow, especially for longer videos.

To make your videos more accessible, accurate, and SEO-friendly, upload your file and order captions from GoTranscript today.