Test WebVTT Cue Settings and Styling

Dynamically position and style the caption. Read more about how this is done.

Add whatever cue text you would like. Try some of the different valid span tags. See what happens with line breaks you enter.
13
50
100

Sample WebVTT Cue Based on Current Settings

A simple, straightforward representation of these settings. Read the spec for optional ways to apply some cue settings in WebVTT.


    

Cue Class Span

Classes are available for using a cue class span. You can use the classes red, blue, green, and yellow.

To change the background-color of the cue you can use the classes background-red, background-blue, background-green, and background-yellow.

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

Classes can be chained.

<c.red.background-yellow>This text is red with a yellow background</c>

Of course in your own applications you can use whatever class names and styling as you want.

Styles

Here's an area where you can add styles that will apply to every cue. You can find out which styles can be applied to cues. Styling only works in Chrome, Opera, and Safari.

::cue {

}

Changes

2014-10-21 Use the track load event before trying to set things up.