How to Add VTT Captions to WordPress Videos

MetaSlider Pro has a feature that allows you to add captions to videos hosted inside WordPress and videos hosted externally. In this guide, I’ll give you some helpful background to show how video captions work and what you need to know when adding them to your videos.

Types of Video Caption: SRT or VTT?

To add captions to a video, you always start with a file that contains the caption text.

There are dozens and dozens of formats available for captions. The two most popular formats are VTT and SRT:

• SRT is short for “SubRip Subtitle format”. SRT is the older format and dates back to the year 2000 when people copied DVDs and wanted to extract the subtitles.
• VTT is short for “Web Video Text Tracks” and sometimes it is also called WebVTT. This format was first created in 2010 and is designed for HTML5. This allows you to style the fonts, move them around the video, and edit the subtitles freely.

Both SRT and VTT are valid options for video captions. Both are widely supported by modern web browsers and are commonly used for adding captions or subtitles to videos. GetSubly has a detailed comparison between the two formats.

MetaSlider uses the VTT format because we first chose to use the Video.js library to power the video player in our plugin. Click here to see all the details for how Video.js uses VTT captions.

it’s essential to follow the correct syntax and format to ensure that your VTT captions work. GetSubly shared this screenshot, which is a good example of the VTT file format. There are a good number of free and paid tools available online to help you create a VTT file in this format. Here’s a helpful guide to what a VTT file must contain.

Here are some key points about VTT captions:

• File Format: VTT captions are plain text files with a .vtt file extension. The format is designed to be easily readable both by humans and computers.
• Timestamps: WebVTT captions include timestamps that indicate when each caption should appear and disappear on the video timeline. This allows for synchronization with specific moments in the video.
• Text Formatting: VTT supports basic text formatting options such as bold, italics, and underline, enabling content creators to style captions for emphasis.
• Cue Settings: Each caption block in a VTT file is called a “cue.” Cues have settings that define their appearance, such as position, size, and alignment on the video screen.
• Multilingual Support: WebVTT supports multiple language tracks within the same file, making it possible to provide captions in different languages for the same video.
• Accessibility: Adding VTT captions to videos enhances accessibility, allowing users who are deaf or hard of hearing to follow the content. It also benefits users who prefer or need captions in noisy environments or situations where audio playback is not ideal.

Video Caption Settings in MetaSlider

In the MetaSlider Pro admin area, click the “Text track” tab on your Local Video Slide. There are four settings available:

• Source: This will be the URL for your VTT file.
• Language label: This is the label users will click on to activate captions.
• Language kind: There are four different types of VTT file supported in MetaSlider:
  • Captions
  • Chapters
  • Descriptions
  • Subtitles
• Language code: This is a 2-letter code. Click here to find the code for your language.

Captions, Chapters, Descriptions, or Subtitles?

Mozilla has a very detailed overview of the settings available for VTT files. MetaSlider supports four different types of text for your videos:

1. Captions: This is the default choice that most people should use. This type is designed for transcriptions of the dialogue, sound effects, musical cues, and other audio information. The captions are shown over the video.
2. Chapters: These are chapter titles that are used to create navigation within the video. Typically, these are in the form of a list of chapters that the viewer can use to navigate the video.
3. Descriptions: These are text descriptions of the action in the content for when the video portion isn’t available or because the viewer is blind or not using a screen. Descriptions are read by a screen reader or turned into a separate audio track.
4. Subtitles: These are translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.

This next screenshot shows an example of the “Captions” option. This VTT starts this way:

WEBVTT

00:01.000 --> 00:04.000
- Let's create some WordPress videos

00:05.000 --> 00:09.000
- It's the best way to build a website

This next screenshot shows an example of the “Chapters” option. This video is currently in Chapter 1, called “Opening Credits”. The visitor can trigger the chapter navigation using the toolbar below the video. This VTT file starts this way:

WEBVTT

1
00:00:00.000 --> 00:01:42.000
I. Opening credits

2
00:01:42.500 --> 00:04:44.000
II. A dangerous quest

This next screenshot shows an example of the “Descriptions” option. The visitor can enable the descriptions using the toolbar below the video. The file format is the same as for “Captions”, but you choose the “Descriptions” setting in the MetaSlider admin area.

Finally, the “Subtitles” option appears identical in every way to the “Captions” option. However, the text should be a translation of the original video. In this screenshot, the subtitles are in Portuguese, although the video is in English.

More on Video Captions in MetaSlider

MetaSlider allows you to create slideshows using Local Video Slides and External Video Slides. The process of adding captions to the videos is slightly different for the two slide types: here’s the guide to captions for local videos and here’s the guide to captions for external videos.

MetaSlider also supports YouTube slides and Vimeo slides. You can add captions to those videos by uploading the caption files to YouTube or Vimeo.