4

I have a HTML5 video with a track-element for subtitles in webvtt-format. How can I remove the black background behind the subtitles on iOS/iPhone/iPad? In the browsers on a PC I can remove it with CSS ::cue{background: transparent;}

Thanks for help

Baumi
  • 61
  • 1
  • 4

3 Answers3

1

I think i found the solution. It took me couple of days and a lot of Googling, to finally figure it.

It has got to do with MacOS(iOS) System Preferences, and how to show captions.

To fix this, go to:

Mac System Preferences -> Accessibility -> Captions -> Change "Transparent Background" to "Classic".

You will have to close the browser tab or application, for it to apply. I discovered that the subtitles in the HTML player were without the background until the next morning, because I hadn't closed the tab before.

Had I changed the setting back, I wouldn't have found it out. :)

Nesatur
  • 41
  • 6
0

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

video::-webkit-media-text-track-display-backdrop {
  background-color: rgba(0,0,0,0) !important;
}
Bimmywinny
  • 11
  • 2
-4

Try this:

video::-webkit-media-text-track-display{background-color: transparent;}

On IOS7 it works correctly.

a_hardin
  • 4,991
  • 4
  • 32
  • 40
Edgar Bentkovskiy
  • 1