What is the difference between WebVTT and SRT

WebVTT uses a period for milliseconds (00:00:05.000), requires a 'WEBVTT' header, supports CSS styling, and has native HTML5 browser support. SRT uses a comma (00:00:05,000), has no header, limited styling, but works with more desktop video players.

How do I add WebVTT subtitles to HTML5 video

Add a element inside your tag: . The browser will load and display the subtitles automatically.

Can I style WebVTT subtitles with CSS

Yes, use the ::cue pseudo-element selector. For example: video::cue { background: black; color: white; font-size: 20px; }. Chrome has the best CSS support for WebVTT styling.

Why are my WebVTT subtitles not loading

Common causes: missing WEBVTT header, wrong MIME type on server (should be text/vtt), CORS issues with cross-origin files, or syntax errors in timestamps. Check browser console for errors.

Can WebVTT files include chapters

Yes, WebVTT can define chapters. Use kind='chapters' on the element. Each cue represents a chapter with start/end times and a title. YouTube and other platforms support VTT chapters.

How do I convert SRT to WebVTT

Add 'WEBVTT' at the top of the file, change commas to periods in timestamps (00:00:05,000 becomes 00:00:05.000), optionally remove sequence numbers, and save as .vtt. Many online tools automate this conversion.

WebVTT Format: Complete Technical Guide for 2026

Name: EasyLRC
Author: EasyLRC

What Is WebVTT

WebVTT (Web Video Text Tracks) is the W3C standard format for displaying timed text in HTML5 video players. It supports subtitles, captions, chapters, and metadata. WebVTT files use the .vtt extension and are natively supported by all modern browsers without plugins. The format extends capabilities beyond simple subtitles with positioning, styling, and rich metadata options.

WebVTT File Structure

WEBVTT

NOTE This is a comment

00:00:05.000 --> 00:00:08.000 First subtitle line

00:00:10.500 --> 00:00:14.000 line:80% position:50% Second subtitle with positioning

00:00:15.000 --> 00:00:18.500 <v Speaker Name>Third subtitle with voice tag

Required elements: • File MUST start with 'WEBVTT' header • Blank line after header • Cues with timestamps and text • Blank lines between cues

WebVTT Timestamp Format

WebVTT timestamps use the format hh:mm:ss.mmm or mm:ss.mmm:

• Hours are optional (but minutes required) • Uses period (.) as decimal separator • Milliseconds have 3 digits (000-999) • Arrow separator: --> (with spaces)

Examples: • 00:00:05.000 --> 00:00:08.000 • 00:30.500 --> 00:35.250 (no hours)

Key difference from SRT: WebVTT uses period (.) while SRT uses comma (,) for milliseconds.

WebVTT Cue Settings

Cue settings control subtitle positioning and display:

vertical:rl|lr - Vertical text (right-to-left or left-to-right) line:0-100% or line number - Vertical position position:0-100% - Horizontal position size:0-100% - Width of cue box align:start|center|end - Text alignment

Example: 00:00:05.000 --> 00:00:08.000 line:10% position:20% align:start size:50% This text appears in top-left corner

Not all players support all settings. Test in target browsers.

WebVTT Styling with CSS

WebVTT supports inline tags and external CSS:

Inline tags: Bold Italic Underline <c.classname>Custom class</c> <v Speaker>Voice/speaker label</v> <lang en>Language tag</lang> <ruby>Ruby<rt>annotation</rt></ruby>

CSS styling: video::cue { background: rgba(0,0,0,0.8); color: white; font-size: 120%; } video::cue(b) { color: yellow; }

Browser support for CSS varies. Chrome has the best support.

WebVTT Chapters

WebVTT can define video chapters for navigation:

WEBVTT

00:00:00.000 --> 00:05:00.000 Introduction

00:05:00.000 --> 00:15:00.000 Main Content

00:15:00.000 --> 00:20:00.000 Conclusion

To use as chapters, reference with kind="chapters":

YouTube automatically creates chapter markers from VTT chapter files.

WebVTT vs SRT Comparison

Header: • WebVTT: Requires 'WEBVTT' header • SRT: No header required

Timestamps: • WebVTT: Period decimal (00:00:05.000) • SRT: Comma decimal (00:00:05,000)

Styling: • WebVTT: CSS and inline tags • SRT: Basic HTML tags only

Positioning: • WebVTT: Full cue settings (line, position, size) • SRT: Limited positioning syntax

Browser support: • WebVTT: Native HTML5 support • SRT: Requires conversion or plugin

Use WebVTT for: Web video, HTML5 players Use SRT for: Desktop players, broad compatibility

Converting SRT to WebVTT

To convert SRT to WebVTT:

Add 'WEBVTT' header at the beginning
Replace commas with periods in timestamps
Remove sequence numbers (optional in VTT)
Save with .vtt extension

Before (SRT): 1 00:00:05,000 --> 00:00:08,000 Hold me close and hold me fast

After (VTT): WEBVTT

00:00:05.000 --> 00:00:08.000 Hold me close and hold me fast

Online converters and tools like FFmpeg can automate this.

Browser and Platform Support

Full support: • Chrome/Chromium - Full CSS and cue settings • Firefox - Good support, some CSS limitations • Safari - Full support on macOS/iOS • Edge - Full support (Chromium-based)

Platform integration: • YouTube - Accepts VTT uploads • Vimeo - Native VTT support • HTML5 <video> - All modern browsers • HLS/DASH streaming - VTT for subtitles

Mobile: • iOS Safari - Full native support • Android Chrome - Full support • Native video apps - Varies by implementation

Common WebVTT Errors

Subtitles not appearing: • Missing 'WEBVTT' header • Wrong MIME type (should be text/vtt) • CORS issues loading cross-origin VTT • Invalid timestamp format

Styling not working: • Browser doesn't support ::cue CSS • Inline tags not closed properly • Class names don't match CSS

Positioning issues: • Cue settings syntax errors • Conflicting percentage values • Browser-specific rendering differences

Validation tools: • W3C WebVTT validator • Browser developer console • Live Subtitle Validator extension

Using WebVTT for Lyrics

WebVTT can display synchronized lyrics in HTML5 audio/video players:

• Combine with <audio> element for music • Use positioning for karaoke-style effects • Style with CSS for custom appearance

However, for dedicated music players, LRC format is preferred because: • LRC has better music player compatibility • Enhanced LRC supports word-level timing • LRC is simpler for distribution

For web-based lyric display, WebVTT works well. For offline music players, use LRC. EasyLRC can export to both formats.