How to Convert SRT to VTT: Step-by-Step Tutorial
Learn how to convert SRT subtitle files to WebVTT format. Simple guide for converting subtitles for web video players.
Introduction
SRT (SubRip) and VTT (WebVTT) are the two most popular subtitle formats on the web. SRT is the universal editing format, while VTT is the standard for HTML5 video playback. If you are uploading subtitles to YouTube, Vimeo, or embedding them in a web page, you need VTT format.
This guide covers everything you need to know to convert SRT to VTT correctly, including the technical differences between formats, how to avoid common mistakes, advanced VTT features you can use after conversion, and troubleshooting tips for edge cases.
Key Differences Between SRT and VTT
1. Timestamp Format
This is the most common source of conversion errors. A VTT file with commas instead of dots will fail to load in most HTML5 video players. Always check that your timestamps use the correct separator for the target format.
2. File Header
The WEBVTT header is required by the HTML5 specification. Without it, browsers like Chrome, Firefox, and Safari will ignore the subtitle track entirely.
3. Entry Numbering
You can include numbers in VTT files for organizational purposes, but they are not required. Most converters omit them.
4. Styling Support
This is the most significant functional difference. VTT can render colored, positioned, and styled subtitles, while SRT shows the same plain text everywhere.
5. Metadata
VTT can be used for more than just subtitles — you can define chapter navigation points and include descriptive metadata.
Visual Comparison: SRT vs VTT
SRT file:
```
1
00:00:02,500 --> 00:00:05,000
Hello and welcome to our tutorial.
2
00:00:06,000 --> 00:00:08,500
Today we will learn about subtitle conversion.
```
VTT file (converted):
```
WEBVTT
00:00:02.500 --> 00:00:05.000
Hello and welcome to our tutorial.
00:00:06.000 --> 00:00:08.500
Today we will learn about subtitle conversion.
```
The differences are subtle but critical: the WEBVTT header, the dots in timestamps, and the removed entry numbers.
Full Feature Comparison Table
| Feature | SRT | VTT |
|---|---|---|
| Timestamp separator | Comma (,) | Dot (.) |
| File header | None required | WEBVTT required |
| Entry numbers | Required | Optional |
| CSS styling | No | Yes (via ::cue) |
| Cue positioning | No | Yes (position, line, align) |
| Chapter markers | No | Yes |
| Voice labels | No | Yes (
| Comments | No | Yes (NOTE blocks) |
| Unicode | Yes | Yes |
| Browser playback | No | Yes (native HTML5) |
| File size | Small | Medium |
| Reading speed control | No | Yes (via pause / length hints) |
Step-by-Step SRT to VTT Conversion
The entire process takes seconds and happens entirely in your browser. Your file never leaves your computer.
Batch Conversion
If you have multiple SRT files to convert (e.g., for a multi-episode series), you can use the converter repeatedly. Each conversion is instant, so processing an entire season takes only a few minutes.
Adding VTT Styling After Conversion
Once you have your VTT file, you can enhance it with CSS styling. Here are common use cases:
Changing Text Color and Background
```css
::cue {
background-color: rgba(0, 0, 0, 0.75);
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
}
```
Highlighting Speaker Names
```css
::cue(.speaker) {
color: #FFD700;
font-weight: bold;
}
```
Positioning Subtitles for Different Content
```
WEBVTT
00:00:02.500 --> 00:00:05.000 position:10% line:90%
Hello and welcome to our tutorial.
00:00:06.000 --> 00:00:08.500 position:50% line:50% align:middle
Centered subtitle example.
```
Use `position` for horizontal placement, `line` for vertical placement, and `align` for text alignment within the cue.
Using Voice Labels
```
WEBVTT
00:00:02.500 --> 00:00:05.000
00:00:06.000 --> 00:00:08.500
```
Voice labels allow CSS targeting and help viewers distinguish speakers.
Common Issues and How to Avoid Them
Missing WEBVTT Header
Browsers require the WEBVTT header. Without it, the video player will not load the subtitle track. Our converter always adds it automatically, but if you edit the file manually, double-check that the first line reads exactly `WEBVTT` (with no trailing spaces).
Incorrect Timestamp Separators
Using commas instead of dots in VTT timestamps causes parsing errors. This is the most common issue when manually converting files. If your VTT file fails to load, check every timestamp for commas.
Encoding Problems
VTT files must be UTF-8 encoded. Non-UTF-8 characters (like accented letters in ISO-8859-1) will display as garbage or cause the track to fail. Use our Online Editor to ensure proper encoding.
Styling Loss When Converting Back
Converting VTT to SRT strips all CSS styling because SRT does not support it. Always keep an SRT master copy before adding VTT-specific styling. Never use VTT as your master format unless you are certain you will never need SRT output.
Extra Blank Lines
VTT is sensitive to blank lines. Extra blank lines in the middle of the file can break parsing. Our converter outputs clean, spec-compliant VTT.
Zero-Duration Cues
If your SRT file contains entries where start time equals end time, the resulting VTT cue will have zero duration and will not display. Use our Duration Fixer before converting.
Troubleshooting VTT Playback Issues
| Symptom | Likely Cause | Fix |
|---|---|---|
| Subtitle track not loading | Missing WEBVTT header | Add `WEBVTT` as first line |
| Timestamps not recognized | Commas instead of dots | Replace all commas with dots in timestamps |
| Garbled characters | Wrong encoding | Re-save as UTF-8 with BOM |
| Subtitles not positioned correctly | Invalid cue settings | Check for typos in position/line values |
| Styling not applied | CSS not linked | Ensure CSS is in the page or use inline ::cue |
| Subtitles flash and disappear | Zero-duration cues | Fix durations before conversion |
Advanced VTT Features
Chapter Markers
VTT supports chapter navigation, which is useful for long-form educational content:
```
WEBVTT
00:00:00.000 --> 00:00:30.000
Chapter 1: Introduction
00:00:30.000 --> 00:02:00.000
Chapter 2: Getting Started
00:02:00.000 --> 00:05:00.000
Chapter 3: Advanced Techniques
```
When to Use SRT vs VTT: Decision Guide
Choosing between SRT and VTT depends on your target platform and requirements:
| Scenario | Recommended Format | Reason |
|---|---|---|
| YouTube or Vimeo upload | VTT | Required by both platforms |
| HTML5 web video embedding | VTT | Native browser support via `
| Archiving subtitles long-term | SRT | Universal, no header requirements, simplest format |
| Video editing (Premiere, DaVinci) | SRT | Better import support in NLE software |
| Mobile app playback | VTT | Built-in iOS/Android video player support |
| Sharing subtitles with others | SRT | Highest compatibility across all players |
| Adding styled/web captions | VTT | CSS styling via ::cue pseudo-element |
| Master copy before styling | SRT | Keeps styling separate from timing data |
HTML5 Video Embedding with VTT
Once you have your VTT file, embed it in a web page using the `
```html
```
The browser handles subtitle rendering automatically. Add multiple language tracks:
```html
```
Users can switch between languages from the video players subtitle menu. Note that SRT files cannot be used directly with the `
Real-World Conversion Scenarios
Scenario 1: YouTuber Uploading a Tutorial
A creator has SRT subtitles from their editor and needs VTT for YouTube. They convert using our tool in 2 seconds, upload to YouTube Studio, and the subtitles go live immediately. They then add CSS styling for their website embed with colored speaker labels.
Scenario 2: Educational Course Platform
An online course provider has 200 SRT files from instructors. They batch convert all files to VTT, add chapter markers for lesson navigation, and embed them in their HTML5 player. Students can click chapter markers to jump between sections.
Scenario 3: Corporate Training Video
A company needs subtitles for internal training videos hosted on their intranet. They convert SRT to VTT, add position cues to place subtitles in the lower third so they do not cover important diagrams, and embed the videos with multiple language tracks for their global workforce.
VTT Specific Cue Settings Reference
Beyond basic styling, VTT supports these cue settings:
| Setting | Values | Description |
|---|---|---|
| `position` | 0%-100% | Horizontal position of the cue box |
| `line` | 0%-100% or integer | Vertical position (percentage or line number) |
| `align` | start, center, end, left, right | Text alignment within the cue |
| `size` | 0%-100% | Width of the cue box as percentage |
| `vertical` | lr, rl | Vertical text direction |
Example combining multiple settings:
```
WEBVTT
00:01:00.000 --> 00:01:05.000 position:20% line:80% align:start size:60%
This subtitle is positioned at 20% from left, 80% from top,
left-aligned, and the cue box is 60% of the screen width.
```
These settings give you fine-grained control over subtitle placement without requiring external CSS.
Common Pitfalls When Manually Converting
If you ever need to convert SRT to VTT manually (without our tool), watch out for these:
Our SRT to VTT converter handles all of these automatically.
Descriptions
You can include text descriptions (not shown on screen) using NOTE blocks:
```
NOTE
This subtitle file covers the tutorial series part 1-3.
Last updated: January 2026. Reviewed by the content team.
```
Related Tools
Conclusion
Converting SRT to VTT is a simple process that ensures your subtitles work correctly on web platforms. The conversion itself takes seconds, but understanding the differences between formats helps you avoid common pitfalls and take advantage of VTT's advanced features like CSS styling, cue positioning, and chapter markers.
Try our SRT to VTT converter now — it is free, private, and requires no registration. Your files are processed entirely in your browser and never uploaded to a server.