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:
audio_shortcode

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:

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:
/wp-includes/js/mediaelement/controls.svg

I copied it, modified it to make the icons darker, and saved it in my theme’s images folder as “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:

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:

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!).

 

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)

179 thoughts on “Style the WordPress Media Player!

  1. 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.

    1. 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.

      Best,
      Brian

  2. 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(‘https://box375.bluehost.com:2083/cpsess8283805547/viewer/home2%2fcustoqi4%2fpublic_html%2fwp-includes%2fimages/controls-dark.svg’) !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!

    1. 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.

      1. 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!

  3. 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?

  4. 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)

    1. 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.

      Best,
      Brian

  5. 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?

    http://screencast.com/t/ZBU8gwRa

    here’s what it looks like on safari:-

    http://screencast.com/t/V7R4rzc1xl

    would love to hear any thoughts you have.

    thanks

    pete

  6. 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?

    Sincerely
    Iain

Leave a Comment or Ask a Question