My html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<video controls="" autoplay="" name="media">
<source src="videoPath" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="subs.vtt" default>
</video>
</body>
</html>
as subs.vtt is the subtitles file.
How do I change the subtitles size attached to the track element?
I tried creating a css file, then gave the track an id and specified its font-size in the css, and of course linked the css to the html, but the size didn't change.
I also tried styling inside the .vtt file itself:
WEBVTT
1
00:00:43.889 --> 00:00:46.949 size:200%
<i>Introduction...</i>
and it didn't change the size.
I tried also something like this that I found online:
WEBVTT
<link href="style.css" rel="stylesheet" type="text/css" />
1
00:00:43.889 --> 00:00:46.949
<c vIntro><i>Introduction...</i></c>
and in css:
.vIntro{
font-size: 5em;
}
but also this didn't change the size.
I prefer a way without touching the .vtt file.
UPDATE: It's 2021, more than six years after the original answer was written, and Shadow DOM has much wider support with a changed spec.
ORIGINAL ANSWER:
In browsers that support Shadow DOM, you can style the subtitles. It may vary from browser to browser, but in Chrome 42 (current as of this writing), you can use this CSS:
video::-webkit-media-text-track-display {
font-size: 200%;
}
Given that there's a vendor prefix in there, I imagine other browsers might require additional rules. Then again, there aren't that many browsers that support Shadow DOM. As of this writing, it's just Chrome, Opera, and Android/Chrome-for-Android.