Custom HTML5 Media Player Skins

With the release of Lectora 16.1, a new HTML5-based media player has been introduced. Just as with the old Flash-based media player, you can develop custom skins for it. However, the format of the skins for the new player differs from the old format. The new skins are based on a sprite sheet of controller elements and a CSS file. This freebie is a set of skins for the new HTML5 media player. These skins were designed to match the blue, green, and red responsive GUI themes that were designed for the release of Lectora 16. You can find those themes here:

To download the media player skins, click on the Download Lectora File button. We are also providing the Photoshop file for the sprite sheets if you would like to modify the design. To download this, click on the spritesheets.psd link beneath the preview image.

To use the skins in your own title, unzip the downloaded skins file. Inside the zip are three more zip files called,, and These are the actual skin files. Double-click the media in your title for which you would like to apply one of the custom skins. Then open the Controller menu on the media Properties ribbon and choose Manage Custom Skins at the bottom of the menu. The resulting dialog box will allow you to import a skin. Once imported, open the Controller menu again and scroll to the bottom of the list. Here you will see the name of the imported custom skin. Select the name to apply the skin to your media.

To find out more about how to build your own custom skins, see our blog post about how to build the skins yourself.

The new HTML5-based media player will also be coming to Lectora Online very soon!

*Very special thanks to Johnattan Barona, Rene Morgan @rmorgan9926, Tom Leone @tleone4566, Stephen Wu @swu7570, Luiz Dias, and Daryl Fleary @dfleary who were all a huge help to me in putting this freebie together! 

Preview image
Additional files: spritesheets.psd

Tags: , , , , , , , ,


  1. Profile photo of Gary Fisher
    Gary Fisher

    Where is the option to have the player use a HTML5 player instead of using a Flash/shockwave player by default?

    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Hi Gary,
      There is no option to use the HTML5 player. With Lectora 16.1 and above, the HTML5 player is used by default. However, you may notice that the player.swf is still included with your published files. This is just a fall-back in the event that the user is running the course on an old browser that does not support the playing of media via HTML5.

  2. Profile photo of Christine O'Malley
    Christine O'Malley

    I have a question… what controls the (appearance of) background for the words in the CC? When I try to use any of these skins, I get a big black box appearing above the controller. looks like it is an extension of the controller. The look I prefer to see is how it appears in your screenshot above; so the words appear to be floating above controller with black background behind the individual words only.

  3. Profile photo of Christine O'Malley
    Christine O'Malley

    I received an answer to my question from Jason Dalrymple. very helpful, thanks again Jason!

    He said: If you’re looking to remove the black background that’s above the controller, that’s just the mejs-container – If you add the below CSS to yours, you should get the appearance you’re looking for, where the captions text “floats” over the page above the controller with no background. If you want to make this a specific color, you can add a hex or rgb color value to the background tag.

    /* 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;

    The same goes for the color of both the caption text and background – hex or rgb values control that as well. You would just need to add “color: ” to the below CSS. I only changed the background color because the default color was an opaque grey with white text – not exactly accessibility friendly contrast. If you have a color in mind, you can use the eyedropper to select the color, then go into the custom color selector. The RGB will be the red, green, blue values and should be entered as “rgb (red, green, blue)” (where the color words are the numeric value). Sometimes using rgb is easier than hex, since it can be easier to get rgb values.

    /* 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;


Leave a Reply to Christine O'Malley Cancel reply

Your email address will not be published. Required fields are marked *