Topics
Members
Website
Knowledge Base
New Topic
Archived

Formatting of Closed Captions in Lectora Online

@ewalsh-3688

November 11, 2020 12:00 AM

Hi All,

Could really do with some help around the formatting of Closed Captions in Lectora Online. I've inserted several MP4 video files into a title, and also added VTT closed caption files for each. However when the title is previewed or published the captions are shown in white text with a transparent background making them unreadable against the lighter parts of the video.

I added some CSS code to the top of each VTT file (shown below) but the background is partially transparent and I can't seem to add line spacing or set the caption background to be completely black rather than transparent.

I'm surprised there isn't a way to set the default look and feel of closed captions - is anyone able to suggest anything? Unfortunately I'm awful at CSS :(

Thanks in advance,

STYLE

::cue {​​​​​​

background: black;

color: white;

}​​​​​​

Discussion (3)

@Christie Calahan November 12, 2020 12:00 AM

It looks like you may have stumped the community! I am sure our customer solutions team can help, please submit a ticket to them here:

https://knowledgebase.elearningbrothers.com/submit-a-case-to-customer-solutions

@jholland November 17, 2020 12:00 AM

@ewalsh-3688, here's a way to modify the background of the caption. You can add this at the title level to inherit on every page, or place on individual pages and modify the color based on that page's video colors.

Create an action to run "On Show" -> "Run Javascript". Then place this code in the javascript box:

triv$( '.mejs__captions-text', getDisplayDocument() ).css("background-color","black");

You can change the "black" to any valid CSS color.

@ewalsh-3688 Author November 24, 2020 12:00 AM

@jholland that works perfectly, thank you :smiley:

Discussions have been disabled for this post

Join The Discussion

Signup or login to get started!