Controlling Captions with WebVTT

If you can’t see the captions, be sure to select the three vertical dots and “Captions” or turn on the [cc] in the player on Firefox.

Here’s the code to load the video and the caption file. It needs “meta charset” because the captions won’t show up in some browsers without it.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <video controls>
           <source src="short-clip-to-test-captions.mp4" type="video/mp4">
           <track src="short-clip-to-test-captions-script.vtt" kind="captions" label="English" srclang="en" type="text/vtt" default />
        </video>
    </body>
</html>

Some browsers won’t have captions if the site isn’t secure. For instance, http://meryl.net/webvtt didn’t work in Edge and Opera. But https://meryl.net/webvtt worked. Notice the s in https. That indicates the site is secure.

Server Tweaks

You may need to set mime type as vtt file. Which option depends on your server. Mine is Apache. I added the following line to my .htaccess file.

AddType text/vtt .vtt

If you have an IIS or Tomcat server, Stack Overflow has instructions. One person said they changed their .vtt file to a .txt file.

Positioning

Here’s the code from the VTT file that formats the captions. Yes, we have to use <i> instead of <em> and <b> instead of <strong>. I tested it with <em> and <strong> and it didn’t work.

WEBVTT
Kind: captions
Language: en

00:00:00.240 --> 00:00:04.160 line:0
Hey, y'all! Meryl Evans here
creating a <i>short</i> clip

00:00:04.776 --> 00:00:07.520 vertical:lr
to show you how
to caption a video.

00:00:08.240 --> 00:00:10.480
You can <b>copy and paste</b>
a script.

00:00:11.398 --> 00:00:17.225 vertical:rl
Or let <u>automatic captions</u>
do the work and then edit it.

I don’t recommend using vertical or top captions. It’s purely for demonstration purposes. The one on the right side reverses the two lines. The only exception to moving caption up top — temporarily — is when you have something on the bottom that can’t be covered. Just use “line:0” as shown in the above example.

Styling: Not Recommended for Colors

You can change the color of the captions with CSS. But I won’t do that because the default is the best practice. Color captions distract from the video. Besides, color won’t work for people with color blindness.

Nonetheless, it doesn’t stop me from experimenting with it out of curiosity. I added the following in this source file. (In WordPress, it goes in the HTML block above <video>.)

<style>
 video::cue {
    background: blue;
    color: white; 
}
 video::cue(b) {
         color: blue; 
}
 video::cue(i) {
         color: purple; 
}
 video::cue(u) {
         color: orange; 
} 
</style>

Background and its associated color work in Firefox, but none of the other browsers. Bold, italics, and underline colors work in Chrome, Edge, Safari, and Opera. It does not work in Firefox.

You can put the style information into the WebVTT file instead of the page as shown here:

WEBVTT
Kind: captions
Language: en

STYLE
::cue {
   background: blue;
   color: white;
 }
::cue(b) {
   color: red;
 }
::cue(i) {
   color: yellow;
 }
::cue(u) {
   color: green;
 }

Background and its associated color did not work in any of the browsers. Bold, italics, and underline colors work in Chrome, Edge, Safari, and Opera. It does not work in Firefox.

The only styling that is acceptable is positioning — only if you have to temporarily move the captions. Most people prefer captions on the bottom.

WebVTT Resources

Keep it simple. Stick with the default off-black background with white font. Boring works. It makes it easier to quickly read the captions and lets the video be the star without any distractions.