I am facing an issue where the subtitles in my video do not play in the middle-bottom as desired. I have tried to style them using CSS but they just won't align to the center. The subtitles always appear at the bottom left of the video.
Here is the HTML code:
<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>
Below is the CSS code I have used:
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;
}
I would appreciate any help or suggestions on how to achieve this alignment. I have already tried various methods like text-align and justify-content, but none seem to work.