Cedaro Blog: Customizing MediaElement.js in WordPress

mejs-class-plugin.php

<?php
/**
 * Add an HTML class to MediaElement.js container elements to aid styling.
 *
 * Extends the core _wpmejsSettings object to add a new feature via the
 * MediaElement.js plugin API.
 */
function example_mejs_add_container_class() {
	if ( ! wp_script_is( 'mediaelement', 'done' ) ) {
		return;
	}
	?>
	<script>
	(function() {
		var settings = window._wpmejsSettings || {};
		settings.features = settings.features || mejs.MepDefaults.features;
		settings.features.push( 'exampleclass' );

		MediaElementPlayer.prototype.buildexampleclass = function( player ) {
			player.container.addClass( 'example-mejs-container' );
		};
	})();
	</script>
	<?php
}
add_action( 'wp_print_footer_scripts', 'example_mejs_add_container_class' );

mejs-simple-selector.css

.example-mejs-container.mejs-container {}

shortcode-selectors-specificity.css

.wp-audio-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float-corner,
.wp-video-shortcode.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float-corner,
.wp-playlist.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float-corner {}

shortcode-selectors.css

.wp-audio-shortcode.mejs-container,
.wp-video-shortcode.mejs-container,
.wp-playlist.mejs-container {}