Custom styling in WebVTT subtitles

Question

Is it possible to set custom styling for specific fragments in WebVTT (.vtt) subtitles?

According to the mozilla's WebVTT API docs it is possible to set CSS pseudo-classes e.g. with:

/* this works ok */
video::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
}

/* this does not work! */
video::cue(b) {
  color: red;
}

and then apply that style in the .vtt file with:

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

In all browsers I've tried world is rendered with the same styling as regular video cues. I.e. the rule for the video::cue pseudo-class is applied and works as expected, while video::cue(b) has no effect.

I have tried defining the CSS pseudo classes in both the <style/> block of the HTML page as well as inside the VTT file itself as given in Mozilla's docs:

WEBVTT

STYLE
::cue {
    background-color:rgba(0, 0, 0, 0.8);
    color: rgb(255, 200, 0);
}

STYLE
::cue(b) {
  color: red;
}

According to https://caniuse.com/webvtt modern browsers support webvtt and it's only Firefox that is/was missing support for the ::cue(<selector>) pseudo-class.

Why is world not rendering with custom styling and is there a workaround?

I think you have to change the subtitle text: - Hello world. to - Hello world. See Example22 class selector https://w3c.github.io/webvtt/#the-vttcue-interface — ste-xx, Nov 28 '22 at 11:34

ccpizza · Answer 1 · 2022-12-03T23:19:22.500

It works as advertised in latest versions of safari, chrome, firefox and derivates.

Browsers are aggressively caching .vtt files and a cache purge solved the issue.

As outlined in https://www.w3.org/wiki/VTT_Concepts#Cue_Payload_Tags only three tags are supported, ,  and , but it is also possible to style via CSS classes:

/* the HTML file containing the video */
video::cue {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffc800;
}

video::cue(b) {
    color: rgb(51, 216, 18);
    font-weight: normal;
}

video::cue(i) {
    color: #00bafd;
    font-style: normal;
}

video::cue(u) {
    text-decoration: none;
    color: #ff00ee;
    font-style: normal;
}

video::cue(.myclass) {
    color: red;
}

WEBVTT

1
00:00:00.000 --> 00:00:11.040
<b>bold</b>
<i>italic</i>
<u>underscored</u>
<c.myclass>Styled</c>

Custom styling in WebVTT subtitles

1 Answers1