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,

::cue {​​​​​​
background: black;
color: white;


  • Christie Calahan
    Christie Calahan Community Member, Administrator, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 30 eLearning ROCKSTAR Admin Team
    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:
    CHRISTIE CALAHAN  |  Senior Director of Marketing
    cc[email protected]
  • jholland
    jholland Administrator, Rockstar Manager Posts: 114 eLearning ROCKSTAR Admin Team
    @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
    ewalsh-3688 Community Member Posts: 23 ☆ Roadie ☆
    @jholland that works perfectly, thank you :smiley: