How to add custom caption styling

Developers Stream
#1

I have a design requirement for specific web-fonts and background-colors for Cloudflare’s built-in captions. How can I do this?

Per the Web-VTT API as shown on MDN (Web Video Text Tracks Format (WebVTT) - Web APIs | MDN), I was hoping I could style the captions from our Angular component’s CSS which has the <cloudflare-stream>.

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

It seems that even when combined with ng-deep, I’m not able to affect change. Have you had success or gone another route?

#2

Because the player is an iframe, you can’t customize the CSS in your HTML.

Background/text color seems straightforward and something we will consider adding support for. Can you share more about your use case for using web-fonts? Is the primary purpose to match your brand’s font or are there other reasons?

#5

Without the ability from CSS, does Cloudflare support styling the cues in another way?
Yes, it’s to match the brand styling. Our design team also desired to modify the font-size and background-color.

#7

Ideally, we’d like a solution that would allow us to have one shared and easily modified style vs uploading a slew of new VTTs every time the style changes.

Is the only way to style now within the .vtt file? Do you have documentation of what kinds of styling are supported or not by Cloudflare for the captions?

STYLE
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

STYLE
::cue {
  font-family: myFirstFont;
  background-color: red;
  font-size: 10px;
}
1 Like
#8

is there any update related to this? It would be awesome to be able to change or remove the black background of the captions… also its position, because the default one feels kind of too close to the bottom.