How to edit and style your video captions

If you are creating captions for your videos, sometimes the captions don't appear where you want. Maybe they don't sit on the screen correctly, or maybe you have a creative way you want to present them. As it turns out, captions are adjustable! It will take some fine tuning to get the hang of working with them, but WebVTT is easy to use.

Prerequisites

For this project you need:

• api.video account - Sign up here!
• A video you want to caption, uploaded to api.video - here's a blog about how to upload your video
• A VTT file for your video - Learn how to caption a video with Maestra

Moving captions

To move captions, open your VTT file. You'll see captions listed next to their times, like this:

00:00:01.000 --> 00:00:02.000 Hello World!

Now let's say you don't like where the caption starts from. You can add on to the end to move it horizontally. Like this:

00:00:01.000 --> 00:00:02.000 position: 20% Hello World!

The screen is divided into percentages, so if you put a lower percentage, your caption moves further to the left. If you choose a higher one, it moves further to the right. Be careful you don't move captions into positions where they can't be seen.

You can also make the captions go vertical. For that, you'd add: 00:00:01.000 --> 00:00:02.000 position: 20% vertical:rl Hello World!

And in this case, the position is vertical, so the percentage represents a portion of the vertical.

You can learn a lot more about how to move captions and what's possible by checking out the WebVTT Guide. Just a few things you can do include changing the color of text, adding italics, specifying if something is loud, and much more!

Erikka Innes

Developer Evangelist