I m using the video-js 5.19.2 and i have customized it to what i want.I want to show the caption in the block on full screen and font-size is also not changing on full screen. I have added this
.video-js .vjs-captions { font-size: 20px; }
.video-js.vjs-fullscreen .vjs-text-track { font-size: 3em; }
in the css file of video-js but font-size is not changing.
[This is the modal video] [1][1]: https://i.sstatic.net/N7kku.jpg
[This is the full size video] [2][2]: https://i.sstatic.net/8GzO8.jpg.
I have seen this is something that has been done in new video-js version but i m not able to change the font-size in 5.19.2.Can Any one help me how to change the font-size in video-js? Thanks in advance.
The internet write-ups for VTT captions/sub-titles that I've seen, recommend defining font properties this way (and it is working for me):
<style type="text/css">
video::cue {
color:CornflowerBlue;
font-size:18px;
}
</style>
Also, I fetch my vjs code from videojs's CDN, like this:
<script src="//vjs.zencdn.net/5.11.9/video.js" ></script>
<link href="//vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet" type="text/css" />
I use 5.11.9 because it is considered the 'stable' 5.x release, per: https://github.com/videojs/video.js/tree/stable
[ When I tried your 5.19.2 instead of my 5.11.9, my style code above FAILS, so your choice of 5.19.2 clearly needs re-thinking. ]
Btw, only SOME browsers honor VTT font-styling...e.g. Chrome does, but Firefox doesn't, etc, etc.
Cheers...