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:middle
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 directly via their captions upload tool.
• Premiere Pro / Final Cut / DaVinci Resolve: Some workflows accept VTT directly; others want SRT. SRT is more universally supported in 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 (for YouTube/TikTok/Instagram URLs), Whisper (open-source, file-based), Otter, Rev, and 3PlayMedia all output VTT or can convert their SRT output to VTT trivially. AI accuracy on clear speech is now 90-95%. For accessibility-grade captions, do a 15-30 minute human review pass on each hour of video.

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 Online VTT Editor — free web tool for editing VTT specifically.

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 tool or framework that requires VTT specifically (Vimeo player API, JW Player, Brightcove)

Use SRT when

• Uploading to YouTube — both work, but SRT is more universally accepted
• Importing into video editors (Premiere Pro, Final Cut, DaVinci Resolve, iMovie)
• 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 (same-language for hearing-impaired), subtitles (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. The format supports four kinds of tracks:

Captions

Same-language text describing all audio (speech + sound effects + speaker IDs). For deaf and hard-of-hearing viewers. Most VTT files in the wild are caption tracks.

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

Used by HTML5 video players to render a chapter list or progress bar markers. Available natively without external libraries.

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 versatility is why VTT remains the W3C-recommended format for HTML5 video, even though SRT remains more universal across non-web platforms.