HTML Track Element

HTML

<div class="video-container">
<video controls src="lord-of-the-rings.mp4">
<track default kind="captions" srclang="en" src="lotr.vtt" />
</video> 
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

.demo-container {
background-color: #000000;
}

.video-container {
margin: 0 auto;
max-width: 640px;
} 

video {
width: 100%;
}

video::cue {
font-family: "Oswald", sans-serif;
font-size: 1.6rem;
line-height: 1.5rem;
background-color: transparent;
color: rgba(245, 245, 245, 0.6);
}

WEBVTT

WEBVTT
Kind: captions
Language: en


00:00:06.210 --> 00:00:09.418 position:50% align:center size:100% line:80%
I WISH THE RING 
HAD NEVER COME TO ME

00:00:11.000 --> 00:00:12.397 position:50% align:center size:100% line:80%
I WISH NONE OF THIS 
HAD HAPPENED

00:00:13.163 --> 00:00:16.023 position:50% align:center size:100% line:80%
SO DO ALL WHO LIVE 
TO SEE SUCH TIMES

00:00:16.121 --> 00:00:18.193 position:50% align:center size:100% line:80%
BUT THAT IS NOT 
FOR THEM TO DECIDE

00:00:19.009 --> 00:00:20.210 position:50% align:center size:100% line:80%
ALL WE HAVE TO DECIDE IS

00:00:20.388 --> 00:00:23.210 position:50% align:center size:100% line:80%
WHAT TO DO WITH THE TIME 
THAT IS GIVEN TO US

00:00:26.188 --> 00:00:28.000 position:50% align:center size:100% line:80%
THERE ARE OTHER FORCES AT WORK
IN THIS WORLD, FRODO!

00:00:28.232 --> 00:00:30.000 position:50% align:center size:100% line:80%
BESIDES THE WILL OF EVIL