Search code examples
videovideo.jsvideojs-transcript

Show captions in block on full size video and font-size isn't changing-Video-js


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.


Solution

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