How to set color of WebVTT subtitle?

The WebVTT specification, https://w3c.github.io/webvtt/, mentions that color (and any other formatting) of cue text can be set using the "::cue" CSS extension.

I tried the simple vtt file:


WEBVTT


::cue(#first_cue) { color: blue }


X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:0


first_cue


00:00:00.000 --> 00:00:10.000


Allo world!


without any success.


What is the simplest implementation that would allow coloring/formatting of cue text?

Replies

Hi,

I am also interested in colors for webvtt.

I tried such Webvtt file but without color display on Safari:


WEBVTT


STYLE

::cue(.cyan){ color: cyan; }


00:00:00:.000 -->00:00:04.000 align:left line:4% position:8%,line-left

<c.cyan> Test WebVTT with cyan color. </c>


Is color supported for WebVtt subtitles ?


Thanks

Hello, we also encountered the same problem, the subtitle color is incorrect, but we found that subtitle settings in the iphone settings will cause the subtitle color to change. Is the subtitle color set as the first priority by the system?

How to change the color of subtitles through style tags?

Thanks!