0

The Subtitles Don't Play In The Middle-Bottom Of The Video & I Want Them To. Is There Any Nice Way To Styling The Subtitles Of A Video? Using CSS? I've Tried It And It Worked Upto A Limit But They Just Don't Align To The Centre Of It. The Subtitles Play To The Bottom Left Of The Video.

HTML:

<video controls = "controls" poster="#" id="myvideo" style= "object-fit: cover;">
    <source src = "#" video = "web/mp4">
    <track kind = "subtitles" srclang = "en" src = "#" label = "English" default>
</video>

CSS:

video::-webkit-media-text-track-container {
  /* Style the container */
  margin: 0px;
  padding: 0px;
}

video::-webkit-media-text-track-background {
  /* Style the text background */
  margin: 0px;
  padding: 5px;
  border-radius: 5px;
  background-color: rgb(200, 200, 200);
}

video::-webkit-media-text-track-display {
  /* Style the text itself */
  font-size: 15px;
  max-width: 250px;
}

Is there A Way To Get This Done? Any Help Would Be Appreciated.

Also, I Tried All Of These,

  text-align: center;
  align-content: center;
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-self: center;
  justify-items: center;
  <center>###</center>

And None Of Them Worked.

Mr.Godfather
  • 1
  • 3

1 Answers1

-1

You may have some luck by using that id. Try this in your css file.

.myvideo {text-align: center;}
Michael Macaulay
  • 29
  • 5