What Is a VTT File?

A minimal valid VTT file is just the WEBVTT header followed by cues. Here is a complete example with three subtitle cues:

WEBVTT

1
00:00:00.000 --> 00:00:03.500
Welcome to the tutorial.

2
00:00:03.600 --> 00:00:07.200
Today we're going to talk about
WebVTT files.

3
00:00:07.300 --> 00:00:11.000
Let's start with the basic structure.

Notice three things that distinguish VTT from SRT:

1. The WEBVTT header on the first line — required, not optional. Without it, browsers will reject the file.
2. Periods, not commas, between seconds and milliseconds in the timecodes (00:00:03.500 in VTT vs 00:00:03,500 in SRT).
3. Cue identifiers are optional — the leading numbers (1, 2, 3) can be omitted in VTT. SRT requires them.

VTT with cue settings (positioning)

VTT supports placing cues anywhere on the video, not just centered at the bottom:

WEBVTT

00:00:00.000 --> 00:00:03.500 line:0 align:start
[narrator at top of screen]

00:00:04.000 --> 00:00:07.000 line:90% align:center
Standard subtitle position.

The line: setting controls vertical position (0 = top, 100% = bottom). align: controls horizontal alignment. SRT cannot do this — VTT can.

VTT with styling

VTT supports CSS styling via the STYLE block:

WEBVTT

STYLE
::cue {
  background-color: rgba(0,0,0,0.8);
  color: yellow;
  font-family: sans-serif;
}

00:00:00.000 --> 00:00:03.000
Yellow text on dark background.

This is a major capability advantage over SRT, which has no native styling support.

VTT files are plain text, so opening one for reading or editing requires no special tool.

Open as text

• Windows: Right-click the .vtt file → Open with → Notepad. Or use VS Code, Notepad++.
• macOS: Right-click → Open With → TextEdit. Or VS Code, BBEdit, Sublime Text.
• Linux: cat filename.vtt or any text editor.

If TextEdit on Mac shows raw HTML-like markup or garbled characters, the file isn't UTF-8 — open in VS Code which auto-detects encoding.

Use with a video

• HTML5 video on a webpage: Add to your video element with the <track> tag: <track src="captions.vtt" kind="captions" srclang="en" label="English">
• VLC Media Player: Open the video, drag the .vtt file onto it, or use Subtitle → Add Subtitle File. VLC handles VTT natively.
• YouTube: YouTube accepts VTT uploads (and SRT). YouTube Studio → Subtitles → Add → Upload file.
• Vimeo, Wistia: Both accept VTT uploads. Vimeo recommends VTT. Wistia converts VTT to SRT on upload, so VTT styling and positioning are lost.
• Premiere Pro / Final Cut / DaVinci Resolve: Premiere Pro and Final Cut Pro import SRT but don't list VTT among their caption formats, so convert first. SRT is the safer choice for editors.

If you have a VTT file and your tool only accepts SRT, conversion is a 5-minute job — change the period to comma in timecodes and remove the WEBVTT header. There are also free online converters that do it in one click.

Three common workflows:

1. Auto-generate from a video

The fastest path. Tools like TranscribeVideo.ai (reads YouTube captions and transcribes TikTok/Instagram audio from a URL), Whisper (open-source, file-based), Otter, Rev, and 3PlayMedia all output VTT or can convert their SRT output to VTT trivially. AI transcription works best on clear speech. Background music, people talking over each other and strong accents cause more errors, and names are a common miss. For accessibility-grade captions, have a person review the whole file against the video before you publish.

2. Hand-write in a text editor

For a short clip, hand-writing a VTT file is fine. The format is simple. Open a text editor, type WEBVTT on line 1, leave a blank line, then add timed cues following the pattern in the example above. Save with the .vtt extension as UTF-8 encoding.

3. Use a subtitle editor

For longer content with precise timing requirements, a dedicated tool is faster:

• Aegisub (free, all platforms) — professional-grade subtitle editor with waveform view.
• Subtitle Edit (free, Windows) — popular, supports both SRT and VTT natively.
• Kapwing (web-based, freemium) — good for quick caption editing in-browser.
• HappyScribe — web-based subtitle tools that handle VTT.

Critical details when creating VTT

• Always start with WEBVTT on line 1. Without this, browsers won't load the file.
• Use periods, not commas, in timecodes (00:00:01.500, not 00:00:01,500).
• UTF-8 encoding required. Non-ASCII characters break in other encodings.
• Blank line between cues. Required by the spec.
• Cue ID is optional. Unlike SRT, you can omit the leading number.

Both formats serve the same purpose but fit different contexts. The decision is usually obvious once you know what platform you're targeting.

Use VTT when

• Embedding subtitles in HTML5 video on your own website using the <track> element
• You need positioning control (subtitle anywhere on the screen, not just bottom-center)
• You need CSS styling (custom fonts, colors, backgrounds)
• You're working with a player built around VTT (Brightcove's player, for example, converts other caption formats to WebVTT)

Use SRT when

• Uploading to YouTube — both work, and SRT also works on most other platforms
• Importing into video editors (Premiere Pro, Final Cut, DaVinci Resolve)
• Distributing across many platforms — SRT has wider compatibility
• You don't need styling or positioning

Quick conversion

Converting SRT to VTT is mechanical: add WEBVTT as the first line followed by a blank line, then change all commas in timecodes to periods. That's it. Most online converters do this; you can also do it in any text editor with find-and-replace.

Going the other way (VTT to SRT) is also straightforward: remove the WEBVTT header, change periods to commas in timecodes, and ensure each cue has a sequence number.

For a deeper comparison, see SRT vs VTT in detail.

WebVTT is supported in every major modern browser. The HTML5 <track> element loads VTT natively without any JavaScript or library:

Minimal HTML5 example

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt"
         kind="captions"
         srclang="en"
         label="English"
         default>
</video>

The kind attribute can be: captions (dialogue plus sound effects, for viewers who can't hear the audio), subtitles (dialogue for viewers who can hear but don't understand it, such as a translation), descriptions (audio descriptions for visually impaired), chapters (chapter navigation), or metadata (programmatic data). The browser renders captions and subtitles automatically; descriptions, chapters, and metadata require JavaScript to surface.

VTT was designed to handle more than just subtitles. A VTT file can serve several kinds of track, including these four:

Captions

Same-language text describing all audio (speech + sound effects + speaker IDs). For deaf and hard-of-hearing viewers.

Subtitles

Translation of dialogue into another language for hearing viewers who don't speak the original. Same VTT format, different kind attribute (kind="subtitles").

Chapters

VTT can define chapter markers in a long video. Each cue is a chapter with a start time and chapter title:

WEBVTT

00:00:00.000 --> 00:02:30.000
Introduction

00:02:30.000 --> 00:08:45.000
Setting up the project

00:08:45.000 --> 00:15:00.000
Writing the first feature

Browsers don't show chapters on their own. A web player reads them with JavaScript (the TextTrack API) to build a chapter list or progress-bar markers.

Metadata

Arbitrary data tied to specific video timestamps. Used for cue points in interactive video — triggering UI changes, displaying related content, syncing transcript scroll, or marking ad breaks. Read by JavaScript via the TextTrack API.

This range is why VTT is the text-track format browsers use for HTML5 video, while SRT stays more common outside the web.