Is there a way to increase the font size of subtitles in eLearning courses - SCORM and xAPI

Within SCORM or xapi you should be able to set things like that within the SCORM. Can you edit css in your SCORM maker? If so, probably yes. You’d need to find the appropriate target with an inspector view in your browser. 
 

If you want to do it in the native mp4 video player in Docebo, I figured that one out in css and I would be happy to share code. 

Hi @Sasikumaar 

Are you building your own SCORM content w/ an eLearning authoring tool? If so, you should be able to adjust CC size. I know in Storyline you can specify this in the Player, not sure about others, but I’d be willing to bet there’s a way to do so in most tools.

But it would be nice if there was something in Docebo that would allow you to adjust caption size for videos, rather than using css. Accessibility should be easier to incorporate, not everyone (such as myself) is very adept at using css.

Here is my attempt at this.

If you have uploaded a .vtt file for your captions with an uploaded video you might try this.

Set the size as needed but note that going too large could cause other issues.

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

.flowplayer .fp-captions p {
    font-size: 12px;
}

Hope this helps.

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

.flowplayer .fp-captions p {
    font-size: 12px;
}

Would highly recommend are relative font sizing rather than pixels for something like this. Videos have all the normal multiple sizes of screens issues multiplied since people watch them as part of screens, full screens, Picture in Picture, etc. you can definitely get some weird behaviors with definite sizes. 

@Bfarkas - good idea!

I only went so far as to discover the mechanism to make it work.

Totally understand!

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

.flowplayer .fp-captions p {
    font-size: 12px;
}

@Bfarkas Do you know how I can make the font size relative? This is exactly what I’d like to do. The size is just right when watched in standard mode on desktop, but looks too small when watched in full screen mode.

@Bfarkas 

I’m going to try the following to see if it makes the font size relative.

/** Adjust size of the captions for videos **/ .flowplayer .fp-captions p { font-size: 12vw; }

Changing px to vw scrambled the sub-titles and made them really large.

@gstager Do you know if there’s another way to make the font size relative?

Okay, so I think I may have figured this out. px and vw are different units, so I needed to reduce the value next to the vw entry. 1.5vw seems to have done the trick.

Yup, you got there. adding a few links to this thread for future folks reference or interest. 

Simple explainer of relative vs absolute units in CSS:

https://www.tutorialrepublic.com/css-tutorial/css-units.php

An article that details all the relative units and what they mean:

https://www.google.com/amp/s/www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/amp/

An interesting article on how absolute isn’t so absolute on the web (although really should try to avoid the absolute units for 99% of scenarios of css edits)

https://www.smashingmagazine.com/2021/07/css-absolute-units/

What is VW? I assume similar to EM? I’ve been trying to use EM when I can, but its tough.

Here’s what I use for captions:

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

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

:) if only there was a link that described all the units……

https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/

Haha I know I meant metaphorically - as in my reaction before reading. 

Is vw considered better? I always learned from em. Is em not good now? 

I’m “old” (37- old in the IT community) - learned html back on a 14.4 modem

em is fine, it depends what you want to use as the reference point for the relativeness, they each have their own relation and pros/cons.

I adjusted the caption size so that it is just right in standard screen mode, but unfortunately it doesn’t seem to be updating when switching to full screen mode. 

Just to confirm, you’re still using vw for your units right?

My guess is what you are running into is that there’s no real frame reset on the full screen resize, often would do a script to basically say “selected full screen, reset or change the style”, but the full screen might not be changing the viewport since it would be the page as a whole, so there’s no impact. 

Would need to look to see if there is some type of class/id added when full screen is triggered that could be used to call the change. is this the built in viewer or a different one?

Hi @Bfarkas 

Yes, I’m still using vw for the units and the viewer is the built in one. Looking at the behavior, I think what you say about the lack of a frame reset is probably correct.

Will see if i have a video with captions to upload and see if there’s maybe a tag or something to use, don’t typically use the built in one so unsure. 

Thanks, I really appreciate the help😀

Hi @Bfarkas Did you have any luck figuring out if it’s possible to get the caption size to update in full screen mode? If not, I think I’m going to post an idea.

So sorry, got distracted trying to find a video I had with a matching vtt, just uploaded one and it is processing, give me a few will circle back.

Alright, doable for sure. There is an is-fullscreen  class added up the flow player hierarchy when in fullscreen so we can use that to modify that condition:

.flowplayer .fp-captions p { 
	font-size: 1.5vw; 
}
.is-fullscreen.fp-captions p { 
	font-size: 2.5vw; 
}

Adjust your sizing as needed. Now, I would also reccomend to adjust the line heights to be in alignment with your new sizes, so maybe something as simple as the below, but might want to tweak a bit:

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

Should solve your need.

Thanks a million! I tweaked the sizes slightly and now it works perfectly. I’d like to paste the finished code here for future reference, but even if I choose “code” in the paragraph setting, I can’t seem to paste it in the same format as you. Is there something I’m missing?

excellent! glad it worked!

I just use the insert code button, make sure to pick the format from the dropdown?