Style the WordPress Media Player!

The WordPress 3.6 Media Player came at just the right time for me. Just a month before, Yahoo discontinued their Yahoo Player, and I was left without an audio player solution that I liked which didn’t use Flash.  Then came the WordPress 3.6 to save the day! In this version, WordPress has incorporated the MediaElement.js media player into the core.

You can invoke it by using a simple shortcode  in your WordPress pages and posts like this:

A nifty audio player appears like this:

Okay..  The functionality is fine, but it sticks out like a sore thumb on a white background as you can see here. I couldn’t find any parameters that were customizable, so I looked at the CSS using an inspector and added the following modifications to my theme’s CSS file:

/* WP 3.6 Native Audio Player styling*/

/* change the color of the background */
.mejs-container {
	background: url('') !important;
	background-color: #C8E1FA !important;

/* change the color of the lettering */
.mejs-duration {
	color: black !important;

/* eliminate the yellow border around the play button during playback */
.mejs-controls .mejs-button button:focus {
outline: none !important;

This gets rid of the background image, changes the background color, and changes the color of the text. Note that the “important!” callouts are, well, important. The reason you need them is that the Media Player’s CSS file is loaded after your theme’s CSS file has loaded.

You can change the background color to whatever you want. Changing the background to light blue, the result is this:

Okay, better. But now, the controls are too light and barely show up while the progress bar is too dark. The control icons are in a sprite file located relative to your WordPress directory here:

I copied it, modified it to make the icons darker, and saved it in my theme’s images folder as “mejs-controls-dark.svg”. Click here if you want to download it. (Don’t just modify the WordPress version of this file and save it back to the same location with same filename or else it will be blown away the next time you update). Note that a .png file would probably work fine too.

Next, I added some more CSS to call out the new icon file and lighten the progress bar:

/* use a sprite file with darker transport icons */
.mejs-controls .mejs-button button {
	background-image: url('your-images-directory/mejs-controls-dark.svg') !important;

/* change the color of the progress bar */
.mejs-controls .mejs-time-rail .mejs-time-total {
	background: #AAC7E3 !important;

/* change the color of the current time bar */
.mejs-controls .mejs-time-rail .mejs-time-current {
	background: #00a !important;

/* change the color of the file loading bar */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #ccc !important;

And voila! The result is this:

Stopping the Default Styling From Appearing During Load

Okay, at this point, I thought I was done, but there is one really annoying thing going on.  It’s hard to tell on this particular page, but when you load the page, an older styling of the media player flashes on the screen for a second. (This even happens with the default styling!) It’s most noticeable if you have any Media Players above the fold, which are visible during page load. It’s pretty objectionable on a white background.

If you want to fix this, wrap each media player in a <div> tag with class=”audio-controls”. Then, hide this using CSS:

.audio-controls {

Next, add the following jQuery to your page to hide the controls while loading and unhide them after the page finishes loading. You simply add this to your page or post in Text mode (not Visual mode!).

<script type="text/javascript">// <![CDATA[
// show the media player after it loads
jQuery(document).ready(function() { 
// ]]></script>

Note that I have  not implemented this code on this page because I wanted you to see the problem.

Time to Get Creative!

Okay, so now I’ve given you the tools to color almost all of the elements of the Media Player any way you like! Using these techniques and a bit more CSS, you can do things like alternate row striping like I’ve done here:

Want More?

But what if this isn’t enough customizability? Well, the MediaElement.js player has lots more options. Unfortunately, I couldn’t find a way to tweak these without hacking the WordPress core, which is a definite no-no.  If you want to access these, you could always just skip the WordPress shortcode and call the MediaElement Java Script directly.

Hope this was helpful to you!! Please leave a comment below if you have any comments or questions. – Brian

(p.s., I am using my own cheesy songs not out of vanity, but for legal reasons. I am guaranteed not to get sued for posting my own songs! All songs © 2000 Brian Shim)

Featured Image Photo by Scott Major on Unsplash

191 thoughts on “Style the WordPress Media Player!”

  1. Great article! I was looking to style the media player on my site and was able to do much more than what you have pointed out (like the volume slider.) without hacking the WordPress core. I think if you dig deep enough, you still can do more tweaks in a custom css file.

  2. Hi Brian,

    Great tips. I have been working through them and have pretty much arrived at a player design that suits.

    However, as a relative WordPress novice, I’m having a problem following your suggested steps to stop the: ‘Default Styling From Appearing During Load’.

    1. When you say: wrap each media player in a tag with class=”audio-controls”. I don’t really follow this.

    Do you mean place before and after the ‘MP3 file URL’ that I have placed in my draft post?

    And where do I paste the: class=”audio-controls” command?

    2. Also: the CSS to hide this, and the jQuery command is beyond me!

    Any further guidance and clarification as to ‘what’ should be added to ‘where’ exactly would be much appreciated.

    Best regards

    • Hi Giles,

      Part 1 requires editing the post in Text mode and adding a CSS div with a class to enclose the player code. Exactly how to do it depends on whether you’re using the old WP editor or the new Block editor.

      Part 2 requires adding code to the page or site. You can add it directly to the page in text mode.


  3. Hi Brian! I tried hiding the audio player that flashes on the screen while loading as you suggested but it ended up hiding the whole audio player. Maybe that’s because I’m using a plugin instead of the default wordpress audio player? Would really appreciate your advice if you have the time.

    PS. Love the music as well, keep it up!

    • HI Adam,

      It sounds like the JavaScript code that un-hides the player is not running. Try replacing the code inside the script tags with this:


      That will pop up a box when the page loads. If that doesn’t work, you need to figure out how to get JS onto the page.

      Thanks for your kind words!


  4. Thanks for this great explanation. It helps a lot.

    One question: I tried to remove the flashes by refreshing the pages. I followed your instructions but i think I’mmaking a mistake. I hope you can help me out.
    I did make the tag and I wrote the display:none rule in my CSS code. I think I did this right because it works: the player now isn’t displayed.
    But that’s the problem. I did add the jQuery code on the page but still the player does not load. Maybe I put this code on the wrong way?

    Thanks a lot!

        • My site is not yet online. It is still in the initial phase and protected by a password.
          Can you nevertheless try to help me? I think I’m not putting the code in the right place. I use Impreza as a template and I use WP Backery Page Builder. But I don’t know where and how I should put the jQuery code.

  5. This works great! I have been loooking around for how to customize the music player for a while now. If I want to change the colors of the darker icon sprite file you provided, how would I go about doing so? I tried in Text editor, but errors kept coming up even though I was only changes the HEX codes.

    • Hi Nicole,

      Using a text editor should work unless it is adding some invisible return characters or something. I think that’s what I did but I don’t remember for sure.

      Otherwise, you can google around for an svg editor.


  6. Hey Brian,

    Thanks for explaining all this! It’s great having so many options available when customizing one’s site, and your explanations are super clear, even for a novice like me.

    I’m having one problem though, which is that my darker play button was is not showing up on other devices. It shows up just fine on my computer, but I’ve had the chance to look at it on several computers and some phones now, and there is nothing where the play button should be. I had to remove this css:

    /* use a sprite file with darker transport icons */
    .mejs-controls .mejs-button button {
    background-image: url(‘’) !important;

    so that my customers can at least see the old white play button, but I’d love to use the darker buttons if I can get them to display on other devices besides my own computer. Can you see any reason why the dark buttons wouldn’t be working on other devices? Is it possible I put the .svg file in the wrong place? Let me know what you think. Thanks in advance for the help!

    • Whenever something shows for you, but nobody else, it either has a local address (it’s on your computer) or you have a permission that others do not. The latter seems to be the case. I also get a login request when I go to that url. I imagine that you are already logged in, so it just delivers the requested svg file. If you have ftp access to your site you can put the file in the same directory as your wordpress install, and point the url to it there.

      • Thanks for the advice. I must have just put it in some file through my web host, but since I don’t have FTP access, it must not have been the right place for everyone to see it. I’m trying to figure out how to get FTP access, but I’m super new to all of this, and I don’t know what I’m doing. I’ll report back when I figure something out. Thanks again!

  7. Im thinking of using this on my website. I use a flash player now, which isn’t practical for mobile; on mobile it uses a different html5 fall back player, which isn’t customizable & plays different streams at the same time.

    however with this option I also have small drawbacks on the mobile end. On my phone the volume controls are cut off the player. I already tried setting the width to 90% or to less pixels, but even if the player is only half the screen width, it still cuts off the volume controls.

    Any idea why this happens and if it’s fixable?

  8. Probably a rare need, but I can’t figure out if there’s a way to pull it off. Is there any way to strip out the quotation marks around the title? (The application for which I’m using it doesn’t make sense with those)

    • Hi,

      I can’t think of a way to do that using only CSS… Well, I take that back. Maybe you could use some exotic CSS to display the title as a block of fixed with with overflow:hidden to hide the quotes. It would be tricky.

      The other ways to do it would be to hack the code (not recommended) or use JavaScript.


    • I have the same question. I haven’t found an answer yet, I tried using the pseudo element

      div::first-letter {

      but I don’t have that working yet.

  9. Hi Brian – thanks so much for your helpful post!

    I found your post when hunting around for a way to hide the volume slider and the mute button – saw your reply to Kay Woitas above. here’s what I added:-

    .mejs-controls .mejs-volume-button {display: none !important;}

    .mejs-controls .mejs-horizontal-volume-slider {display: none !important;}

    it worked perfectly in safari. but chrome has a strange effect – this effect is only there before you hit the play button. once the play button is pressed the player looks perfect.

    here’s a screen grab of the odd effect in chrome before play is pressed. Any idea what might cause this? or how to fix it?

    here’s what it looks like on safari:-

    would love to hear any thoughts you have.



  10. Hello Brian,

    I’m using the WordPress media player with a self hosted video, which works fine. The only problem I have is I can’t find a way to add a “fallback image” for mobiles. Currently there is just a black screen with a play button centred inside.
    Would you know how I might add a fallback image please?


    • Ok, it was super-easy. In case someone is looking for the same solution, I just added to my css the following code:
      .mejs-container {
      margin-bottom: 10px;

      Thanks anyway,

  11. Very nice. So maybe you can help with this: when I create a playlist I’d like to be able to make the thumbnails for each playlist item larger, or at least be able to put a banner image across the top of the playlist. Any ideas? Thanks in advance.


Leave a Reply to Brian Shim Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share This