How to change the font size of video subtitles 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>
like subs.vtt - subtitle file.
How do I resize the subtitles attached to an element track
?
I tried to create a css file , then gave track
a id and pointed it font-size
in 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 resize.
I tried also something like this that I found on the internet:
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 css :
.vIntro{
font-size: 5em;
}
but that didn't change the size either.
I prefer the way without touching the .vtt file .
source to share
In browsers that support Shadow DOM , you can create subtitles. It may differ from browser to browser, but in Chrome 42 (current at the time of writing) you can use this CSS:
video::-webkit-media-text-track-display {
font-size: 200%;
}
Given that the vendor prefix is there, I suppose other browsers may need additional rules. Again, there aren't many browsers that support Shadow DOM. At the moment it is only Chrome, Opera and Android / Chrome-for-Android.
source to share