Explore the community Forums Lectora Online Lectora Online Questions & Answers Closed Captioning Issues and Position/Customization Reply To: Closed Captioning Issues and Position/Customization

#439681 Score: 1
Profile photo of Jason Dalrymple
Jason Dalrymple
wise owl
curious george
friend finder
picture perfect
54 pts

Howdy @jorchin.3930 and <span class=”bbp-user-nicename”><span class=”handle-sign”>@</span>jwestlund6143!</span>

It’s been awhile since I’d developed my own custom players, so I had to do some digging around. Which Lectora version are you using?

Essentially, what you have to do make any changes to the appearance of the player or its elements, you need to create a custom CSS file that targets the elements of the player you want to change. In the case of the caption positioning, this is what I have on one of my customer players:

div[class=”mejs-captions-layer mejs-layer”] {
width: 340px !important;
background: #000;

/* Sets vertical position of captions and alignment of text */
div[id^=”audio”] .mejs-captions-position-hover {
width: 500px;
bottom: 54px;
text-align: left;
left: 10px;


/* Changes color for captions text background use visibility: visible; to auto display captions */

div[id^=”audio”] .mejs-captions-text {
padding: 3px 5px;
background: #000;
white-space: pre-wrap;


/* Hides background of display */
div[id^=”audio”] .mejs-container {
position: relative;
background: none;
font-family: Helvetica, Arial;
text-align: left;
vertical-align: top;
text-indent: 0;

(Side note: If you’re using Lectora 18, the “-” in the mejs names are now double underscored “__”).

Here’s the caveat – see that “left: 10px” in the vertical alignment section? That will move the location of the captions relative to the left boundary of the player itself. You can change this to whatever you want, so you may need to play with the number to see what works.

The OTHER caveat that I don’t know that you’ll be able to overcome is a limitation I found on the width of a player. If I understand correctly, you want the caption line to be the entire width of the window with the caption text centered. Sadly, I’ve never been able to create a player with a width of more than 500px. What that means is that when you offset, the caption text will move, but will be no more than 500px wide. The other piece of this is that you have to set the width of the player itself to 500px, as well.

I’ve attached the zip files with two of the players I’ve developed, one for Lectora 16 and one for Lectora 18 (it’s important to differentiate as the code is different between the two versions).

Toy around with them at your leisure. There are couple of helpful tutorials that got me started that may inspire you to do more, which I’ve added at the end here.

Custom HTML5 Media Player Skins

Skinning Lectora’s New HTML5-based Media Player

This post has received 1 vote up.