Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cedaro Blog: Customizing MediaElement.js in WordPress
<?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' );
.example-mejs-container.mejs-container {}
.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 {}
.wp-audio-shortcode.mejs-container,
.wp-video-shortcode.mejs-container,
.wp-playlist.mejs-container {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment