WEBVTT - Cue settings and styling demo

NOTE Free sample WebVTT file from 99helpers.com/file-types/vtt.
STYLE blocks must come before the first cue.

STYLE
::cue {
  background-color: rgba(0, 0, 0, 0.8);
  font-family: "DejaVu Sans", Verdana, sans-serif;
}
::cue(.yellow) {
  color: #ffd700;
}
::cue(v[voice="Ada Example"]) {
  color: #8fd0ff;
}
::cue(v[voice="Bo Example"]) {
  color: #ffb3c7;
}

top
00:00:00.000 --> 00:00:01.900 line:12% align:center
Placed near the top with line:12%

left
00:00:02.000 --> 00:00:03.900 line:40% position:4% size:40% align:start
A box 40% wide, 4% from
the left, text aligned to start

voices
00:00:04.000 --> 00:00:05.900 line:60%
<v Ada Example>Voice spans name the speaker,</v>
<v Bo Example>and STYLE can colour each voice.</v>

classes
00:00:06.000 --> 00:00:07.900 line:60%
<c.yellow>A class span</c>, <b>bold</b>, <i>italic</i>, <u>underline</u>,
and ruby: <lang ja><ruby>字幕<rt>じまく</rt></ruby></lang>

karaoke
00:00:08.000 --> 00:00:10.000 line:60%
Timestamp <00:00:08.500>tags <00:00:09.000>reveal <00:00:09.500>words.