Как центрировать субтитры в проигрывателе HTML5 Video Player? Как дополнительно стилизовать субтитры / подписи?

Question

Субтитры не воспроизводятся в середине видео, и я хочу их. Есть ли хороший способ стилизовать субтитры в видео? Используете CSS? Я пробовал, и это сработало до предела, но они просто не совпадают с центром. Субтитры воспроизводятся в нижнем левом углу видео.

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;
}

Есть ли способ добиться этого? Любая помощь будет оценена.

Кроме того, я пробовал все это,

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

И ни один из них не работал.

Answer 1

Возможно, вам повезет, если вы воспользуетесь этим идентификатором. Попробуйте это в своем файле css.

.myvideo {text-align: center;}