CSS ::cue

The ::cue pseudo-element styles WebVTT cues shown by a video or audio track. It is useful for captions and subtitles, but examples need a real media file and a real .vtt track to render in the player.

Syntax

video::cue {
  color: white;
  background: rgba(0, 0, 0, 0.7);
}

Example

video::cue {
  color: white;
  background: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
}

/* HTML when real files exist:
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="captions" srclang="en" label="English">
</video>
*/

Result:

This page shows the CSS pattern without linking to fictional media files.

Important note

Do not use placeholder media URLs in production examples. If the media file or VTT file does not exist, the demo cannot prove that ::cue works.