'How to hide background for ::cue pseudo-element on Safari?

I'm trying to hide captions on a video element:

captions without css

I'm using the following css:

video::cue { visibility: hidden; }

It works fine in Chrome, but on Safari it only hides the text, and still renders the caption background, like this:

captions with visibility: hidden

I tried adding background: none as well, but there's no change. How else can I hide the captions on Safari, besides modifying the text track list programmatically? Could this be a Safari bug?

csshtmlsafari


Solution 1:[1]

One solution is already mentioned here: Hiding a video text track with Safari. That is, if what you're trying to do is not display your captions directly in the video anyway, just use the track kind "metadata". In my case:

<track default label="English" kind="metadata" srclang="en" src="../static/captions/mexicocity_en.vtt" >

Solution 2:[2]

I think you need to target the parent element of video::cue and hide it. By the way display:none can also be used for hiding though I am not sure

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brian Peterson
Solution 2 Sugata Bhar

Related Questions