Skip Navigation

Configure Caption Style

Warpwire's video and audio player supports some WebVTT custom formatting, including text color and background color.

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