0

My project is to create a video streaming app using NextJS, where I want to display a video and also its subtitles.

Problem:
In Chrome browser the subtitles have a background and I want to remove it (or change its height):

In Firefox or Safari it all works fine.

My code:

margin: auto;   
outline-offset: 0.5px;  
outline: 100vw solid
rgba(32, 35, 37, 0.85);   
background-image: linear-gradient(
                                    to bottom,
                                    rgba(32, 35, 37, 0.85),
                                    rgba(32, 35, 37, 0.85)   
                                );

I also tried background-color but it is not working.

Is there any solution?

VC.One
  • 14,790
  • 4
  • 25
  • 57
SAMIRA hs
  • 91
  • 1
  • 4
  • **PS:** Read [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#styling_the_displayed_subtitles) and also see if [this Answer](https://stackoverflow.com/a/48633014/2057709) helps you. Basically you have to use `::cue` to access the text for styling. – VC.One Oct 25 '22 at 20:49
  • thanks.i use it but not working again....i want to change height – SAMIRA hs Oct 26 '22 at 05:38

0 Answers0