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;
}