I am working with Video JS, which I am finding really great, though I have an issue since I can't change the font size of the subtitle text, when player is in full screen.
What i have done is to change in the Video JS CSS file, the fon't size from 1.4em to 4em.
/* Individual tracks */
.video-js .vjs-text-track {
display: none;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
But it doesn't work, it only changes the susbtitle font size when video player is not full screen.
Can you please help me solve this problem. I am using Video JS version 4.1
I am working with Video JS, which I am finding really great, though I have an issue since I can't change the font size of the subtitle text, when player is in full screen.
What i have done is to change in the Video JS CSS file, the fon't size from 1.4em to 4em.
/* Individual tracks */
.video-js .vjs-text-track {
display: none;
font-size: 1.4em;
text-align: center;
margin-bottom: 0.1em;
/* Transparent black background, or fallback to all black (oldIE) */
background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
But it doesn't work, it only changes the susbtitle font size when video player is not full screen.
Can you please help me solve this problem. I am using Video JS version 4.1
Share Improve this question edited Oct 1, 2014 at 8:51 Thomash 6,3791 gold badge31 silver badges50 bronze badges asked Aug 10, 2013 at 19:22 Martin RohwedderMartin Rohwedder 1,7514 gold badges19 silver badges35 bronze badges 2- 2 Have you had the chance to inspect the code in your browser when the player is in full-screen? Perhaps there is a different CSS class being used. – Shaun Commented Aug 10, 2013 at 19:45
- Can you link to an example of this? – ralph.m Commented Aug 10, 2013 at 23:46
4 Answers
Reset to default 6It seems that All i had to do was to also insert a font-size in the
.video-js .vjs-text-track-display
CSS class
The below code works for me. See https://github./videojs/video.js/issues/3301
.vjs-text-track-display div {
font-size: 1.2em;
}
See below the full code:
<head>
<link href="https://vjs.zencdn/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.vjs-text-track-display div {
font-size: 1.2em;
}
</style>
<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder./oceans-clip.png" controls preload="auto" data-setup='[]'>
<source src="//vjs.zencdn/v/oceans.mp4" type='video/mp4' />
<track kind='captions' src='https://dotsub./media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
<track kind='captions' src='https://dotsub./media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
<track kind='captions' src='https://dotsub./media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub./media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
<script src="https://vjs.zencdn/7.6.6/video.js"></script>
</body>The following code worked for me, the !important part might not be needed:
.video-js .vjs-text-track-cue>div {
font-size: 0.9rem !important;
}
The below code worked for me.
.video-js .vjs-text-track-cue {
font-size: 0.9rem !important;
}