3

I am trying to style closed caption on HTML5 video player via ::cue css selector like below. codepen Link

::cue {
  background: rgba(255, 255, 255, 0.8); /*Not working on iOS Mobile Firefox, Safari*/
  color: #463C40;
}

the background property works fine in chrome - desktop, firefox - desktop. but the same is not working on iOS mobile firefox and safari.

I tried to implement the background color via linear-gradient like below. But it adds a outline(looks like a border) codepen link

::cue{
  color: #463C40;
  background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8));
}

the background property is supported for ::cue have verified it from MDN. Is there any way to make the iOS mobile browsers to render the background color.

Thanks in advance.

Krish
  • 2,590
  • 8
  • 42
  • 62

2 Answers2

0

Chrome browser uses the video::cue background-color and opacity.

video::cue {
  opacity: 0.8;
  background-color: #333;
  font-size: 16pt !important;
}

Safari browser uses -webkit-media-text-track-display-backdrop for it's background color. Note the !important which overrides Safari's "own" styling.

video::-webkit-media-text-track-display-backdrop {
  background-color: #333 !important;
  overflow: visible !important;
}

The following webkit-media-text-track-display overflow add more padding around caption text in Chrome browser:

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

Overflow: visible is important in this code for Safari. Here we set captions transform with the code below for our video, which is dependent on a fixed font-size:

video::-webkit-media-text-track-container {
  overflow: visible !important;
  transform: translateY(30%) !important;
}
Igor Popov
  • 924
  • 8
  • 14
  • I have tried your solution but in safari I am unable to see the closed captions. I have already tried a similar approach like this via this [answer](https://stackoverflow.com/questions/41317044/need-help-styling-subtitles-on-html5-using-the-track-element). Can you create a fiddle to check it in real-time ? – Krish May 08 '23 at 11:36
-1

Maybe you can try the below code:

background: url("back.jpg") #033049;
or you can try this too: html, body {background:url('images/back.jpg');}

Vamsi Krishna M S
  • 7
  • 4
  • I haven't experienced this problem myself. Unfortunately, the question did not provide nearly enough context to identify the underlying problem so I can't confirm your answer would solve the problem. But your answer is still a valid alternative approach. – Rod Dewell May 03 '23 at 22:14
  • This answer is for adding a background image and fallback as background color, But the scope of the question is to style ::cue on HTML5 video on safari and firefox on iOS – Krish May 04 '23 at 15:43