Formatting of Closed Captions in Lectora Online

ewalsh-3688
Community Member Posts: 23 ☆ Roadie ☆
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;
}
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;
}
Tagged:
Comments
-
Christie Calahan Community Member, Administrator, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 30 eLearning ROCKSTAR Admin TeamIt 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 -
@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. -
Categories
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products