Skip Navigation

Configure Caption Style

Warpwire's video player supports some WebVTT custom formatting, including text color and background color. Read on to learn how to format your WebVTT files.

Text Color

You can define text color in a WebVTT file with the following syntax:

WEBVTT

02:00.000 --> 02:05.000

<c.yellow>This is yellow text</c>

Background Color

You can define text background color in a WebVTT file with the following syntax:

WEBVTT

02:00.000 --> 02:05.000

<bg.blue>This text has a blue background</c>

Text and Background Color

Here's an example with both text color and text background color defined:

WEBVTT

02:00.000 --> 02:05.000

<c.yellow.bg_blue>This is yellow text on a blue background</c>

Here's a visual look at captions with the above configuration:

Video player with yellow caption text on a blue background

The following colors are supported. Use the class name in your VTT file:

Class Name 'Color' Value
white rgba(255,255,255,1)
lime rgba(0,255,0,1)
cyan rgba(0,255,255,1)
red rgba(255,0,0,1)
yellow rgba(255,255,0,1)
magenta rgba(255,0,255,1)
blue rgba(0,0,255,1)
black rgba(0,0,0,1)

View Support page