Question

do you have a reference or tutorial on customizing skins graphics/css for mejs?

here’s what i’ve hacked on:

i copied the mejs-ted block in the mejs-skins.css file and renamed its elements to mejs-custom. i created a new PNG file similar to the existing control-ted.png and noted the coordinates of each control. with those coordinates i changed the x/y offsets in mejs-custom (i could really use help with that, too).

but now how to activate this skin? and can you confirm the technique above is correct procedure to create skins?

http://mediaelementjs.com source has switchable skins, but the switching mechanism is pretty well obfuscated in the code, and the mediaelementplayer-skins.html file is missing from the demos section of the mu distribution.

Answer 1

Set up your player then use the changeSkin() method to add the class of your skin to the container div, which is reflected in your skin css file

 var player = new MediaElementPlayer('#player-ID');


   player.changeSkin('skin-container-class');

Then you can style all the elements.

.skin-container-class .mejs-controls {
/*stylez*/
}