I am not able to change the background-color and color of the subtitles box list in the video in Firefox

Question

I am using ReactPlayer to show a video, where I need to show subtitles in Different languages. The background-color and color of the subtitles dropdown box is not getting a proper contrast, due to which, I am not able to see my language options in Firefox.

This problem is not present in Chrome and Safari. Kindly help.

I have tried using inline style and passing style using .css file, both didn't work. Somehow the style is not getting applied to the video.

Below is the codeSandbox for the same.

https://codesandbox.io/p/sandbox/react-player-subtitles-vannila-forked-dvzgvl?file=%2Fsrc%2FApp.js%3A5%2C32

Please let me know in case of further questions.

Answer 1

You need to add a label to the track descriptions, e.g.

{
    kind: "subtitles",
    src: <your url>,
    srcLang: "en",
    label: "English",
    default: false,
},