0

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.stack.imgur.com/N7kku.jpg

[This is the full size video] [2][2]: https://i.stack.imgur.com/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.

waheed shah
  • 494
  • 7
  • 19

1 Answers1

0

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...

David
  • 2,253
  • 5
  • 23
  • 29
  • Thanks for your answer @Dave. I wanted that HLS feature that why i used the version 5.19.2. But when i used your CDN that also use HLS version. So i moved back to your version and font-size is working pretty fine. – waheed shah Dec 28 '17 at 10:42