How to change video subtitles font size in html5?
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.
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.