Using WordPress ‘mejs_settings’ PHP filter

The mejs_settings is a WordPress PHP filter that allows you to modify the configuration settings for MediaElement, the built-in media player used in WordPress.

Usage

To use the mejs_settings filter, add the following code to your WordPress theme’s functions.php file:

function my_custom_mejs_settings( $mejs_settings ) {
    // your custom code here
    return $mejs_settings;
}
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, replace my_custom_mejs_settings with a unique name for your function, and add your custom code inside the function.

Parameters

$mejs_settings (array): MediaElement settings array.

More information

See WordPress Developer Resources: https://developer.wordpress.org/reference/hooks/mejs_settings/

Examples

Add custom CSS class to MediaElement player

This example adds a custom CSS class to the MediaElement player, which can be used to style the player with CSS:

function my_custom_mejs_settings( $mejs_settings ) {
    $mejs_settings['classPrefix'] .= ' my-media-player';
    return $mejs_settings;
}
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, the $mejs_settings['classPrefix'] value is appended with my-media-player, which adds the class mejs-my-media-player to the MediaElement player HTML markup.

This example disables the right-click context menu for the MediaElement player:

function my_custom_mejs_settings( $mejs_settings ) {
    $mejs_settings['features'] = array_diff( $mejs_settings['features'], array( 'contextmenu' ) );
    return $mejs_settings;
}
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, the contextmenu feature is removed from the $mejs_settings['features'] array, which disables the right-click context menu for the player.

Change the MediaElement player language

This example changes the language of the MediaElement player to German:

function my_custom_mejs_settings( $mejs_settings ) {
    $mejs_settings['i18n']['locale'] = 'de';
    return $mejs_settings;
}
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, the $mejs_settings['i18n']['locale'] value is set to de, which changes the player language to German.

Disable keyboard shortcuts

This example disables keyboard shortcuts for the MediaElement player:

function my_custom_mejs_settings( $mejs_settings ) {
    $mejs_settings['features'] = array_diff( $mejs_settings['features'], array( 'keyboardshortcuts' ) );
    return $mejs_settings;
}
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, the keyboardshortcuts feature is removed from the $mejs_settings['features'] array, which disables keyboard shortcuts for the player.

Change the MediaElement player theme

This example changes the theme of the MediaElement player to the dark theme:

function my_custom_mejs_settings( $mejs_settings ) {
    $mejs_settings['style'] .= '#wp-custom-mejs-player .mejs-time-render { color: #fff; }'; 
    return $mejs_settings; 
} 
add_filter( 'mejs_settings', 'my_custom_mejs_settings' );

In the code above, the `$mejs_settings[‘style’]` value is appended with custom CSS.

Note that this example assumes that the player has a custom ID of `wp-custom-mejs-player`.