Best Answer

CSS to change closed caption size

  • 14 November 2022
  • 3 replies
  • 128 views
Daniel
Rank
Userlevel 7
Badge +3

Hi all,

Just wondering if anyone knows the CSS code required to change the font size of closed captions in the video player. I contacted support and they told me the only way to change the size is with CSS. Also, does anyone know if it’s possible to have a dynamic font size that adjusts to the size of the screen? The closed captions look really small when viewed in full screen mode.

Thanks,

Daniel

 

icon

Best answer by Bfarkas 24 November 2022, 02:23

View original

3 replies

gstager
Rank
Userlevel 7
Badge +5

Does the below thread cover what you are looking for?

For something more responsive, you could experiment with using vw instead of px and see how that works.

 

Greg
Bfarkas
Rank
Userlevel 7
Badge +3

Cross answering from the thread above. Note to others coming to look, you may want to adjust the numbers to fit your specific needs. The top part handles the inline video, the bottom half handles when it is triggered to full screen mode.

/** Adjust size of the captions for videos **/

.flowplayer .fp-captions p { 
	font-size: 1.3vw;
	line-height: 1.3vw;
}
.is-fullscreen .fp-captions p { 
	font-size: 2.3vw; 
	line-height: 2.3vw;
}

 

lrodman
Rank
Userlevel 7
Badge +5

Here is how I do it. Cool idea with fullscreen!

 

.fp-captions { font-size: 200%; bottom: 0.9em;}
.fp-captions p { 
	line-height: 80%; 
	border-radius: 2em; 
	padding: 0.2em 0.2em !important; 
	margin: 0.05em !important;
}

 

Reply


Terms & ConditionsCookie settings