1

Good morning/afternoon everyone.

Been playing around with the default wordpress mediaelement player and definitely loving it.

I managed to customize the layout a little by overriding some css values in my child theme stylesheet.
But i don't like doing so because basically i'm just adding some !important css rules, that shouldn't necessarily be applied to all of my website pages.

Looking for an alternate way to do this i found: http://wpsites.net/web-design/how-to-deregister-dequeue-style-sheets/

So my question is: would it be possible to dequeue/deregister the wp-mediaelement.css stylesheet (located in the /wp-includes/js/mediaelement/ folder) and register/enqueue a customized stylesheet instead ?

If so, where/how can i get the $handle of wp-included css stylesheets so that i can enqueue my own styles? Is there a list of those $handles similar to this one for js scripts in the wp codex?


Plus, while i was playing with the audio files playlist function i noticed this in the html code of my page:

<div class="wp-playlist-next"></div>
<div class="wp-playlist-prev"></div>

And by adding this to the css:

.wp-playlist-prev {
width: 30px;
height: 30px;
background: red;}

.wp-playlist-next {
width: 30px;
height: 30px;
background: green;}

A green box and a red box eventually show up beneath the controls bar, and clicking on it actually plays the next/previous song.
But what would be the process to seamlessly integrate that functionality into the control bar?

Thanks for reading, this is my first post here, hope i'm doing it the right way.

2

Okay so i did manage to add some custom css selectively on pages that load the medialement player by adding this to my functions.php file:

function custom_player() {
    wp_enqueue_style(
        'custom-player',
        get_stylesheet_directory_uri() . '/wp-mediaelement.css'
    );
        $custom_css = "
                /*here goes the css*/
                ";
        wp_add_inline_style( 'custom-player', $custom_css );
}

add_action( 'wp_enqueue_scripts', 'custom_player' );

Like this by using wp_add_inline_style() i don't need to add some !important css in my theme stylesheet.
Is it a proper way to do it?

[EDIT]
I tried using the dequeue/deregister method above with 'wp-mediaelement' as $handle, but it's totally breaking the layout. I think it could be because when the mediaelement files are loaded there aren't any .css files among it, just .js scripts. So by using the dequeue/deregister method i only get to load some extra css... and that doesn't play well.
But now how can that even be possible? Shouldn't the default css files be enqueued somewhere?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.