webvtt ::cue style

by Csaba Hellinger

HTML

<video id="player" poster="https://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.png" loop="" controls="">
  <source src="https://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.mp4" type="video/mp4">
  <source src="https://ronallo.com/demos/webvtt-cue-settings/soybean-talk-clip.webm" type="video/webm">
  <track label="Live Captioning Example Captions" kind="captions" srclang="en" src="data:text/vtt;base64,V0VCVlRUCgowMDowMC4wMDAgLS0+IDAwOjMzLjAwMApUaGlzIGlzIGEgcGxhY2Vob2xkZXIgY2FwdGlvbi4=" id="caption-change-track" default="">
</video>

CSS

video {
  width: 600px;
  height: 400px;
}

::cue {
  /* doesn't work */
  color: yellow;
  background: blue;
  font-size: 50px;
  visibility: hidden;
  display: none;
  top: 100px;
}