Controlling Captions with WebVTT

This page contains experiments with WebVTT. Normally, I wouldn’t touch color, bold, underline, or captions on the sides. (It’s awful! Why is it in the specification?) The reason I experimented with these is to understand how it works across platforms.

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 is the WebVTT page for the experiments outside WordPress.

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.

YouTube

Not many platforms accept WebVTT files. YouTube does. So, I wondered how it’d work with <style>. It errors when the VTT file has STYLE in the heading (before the captions). But it works when the style is in the captions. However, it cannot do side (left and right) positioning or color. YouTube can only handle:

  • line:0 for top positioning
  • Bold  <b></b>
  • Italics <i></i>
  • Underline <u></ul>

The following image from YouTube shows how it handles VTT. The first captions appear at the top because “Meryl Evans” appears on the screen on the bottom. Then the captions move to the bottom after “Meryl Evans” disappears.

Top positioning is OK if you have information on the bottom behind the captions. And if you need emphasis, use italics … sparingly. Bold and underline are harder to read. Sometimes the bold isn’t obvious. DCMP Captioning Key lists italics in its captioning guide.

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.