WEBVTT

STYLE
::cue {
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-family: sans-serif;
}
::cue(.speaker-a) { color: #7dd3fc; }
::cue(.speaker-b) { color: #fca5a5; }

REGION
id:overlay width:60% lines:2 regionanchor:0%,100% viewportanchor:20%,90%

1
00:00:01.000 --> 00:00:04.000 region:overlay
<v Alex><c.speaker-a>Styled with a cue class</c>

2
00:00:04.500 --> 00:00:08.000 region:overlay
<v Sam><c.speaker-b>A different speaker colour</c>

3
00:00:08.500 --> 00:00:12.000
<b>Bold</b>, <i>italic</i>, <u>underline</u> and <ruby>漢<rt>kan</rt></ruby> markup