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:

/* WP 3.6 Native Audio Player styling*/

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

/* change the color of the lettering */
.mejs-currenttime,
.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:
/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 “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 {
	display:none;
}

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() { 
jQuery('.audio-controls').show(); 
});
// ]]></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)



189 thoughts on “Style the WordPress Media Player!

  1. Hi, Brian

    Is there any way I can completely hide the player?
    I use a plugin that does this. but would like to use the native feature and keep the number of plugin.
    On opening a page I have a song that plays for 30 seconds only.
    This set to autoplay and then it stops ringing.
    Know any way to do this ??
    Thank´s

  2. Hi Brian – Since updating to WordPress 4.0, the controls on the media player disappear when I use your styling. Do you have any thoughts on how I could correct this?

    Thanks.

    1. Figured it out – for some reason the database was adding a backslash before all the apostophes in my CSS file, so the control image file wasn’t found. Did a search and replace and that fixed it.

  3. Hey Brian, thanks for this post. I was just wondering how you added the title of the file to each song? Can this be done using the shortcode? I looked through the documentation and couldn’t find anything on this. Thanks!

    1. Hi Eric,

      Thanks for your question. The titles are just good old fashioned HTML and CSS added on top of the shortcode. Take a look at the source code for this page to see how I did it.

      Thanks,
      Brian

      1. Hey Brian. I tried looking into the source code, but I can’t seem to find the stylesheet that contains the style for div.audio-player, div#example2, div.audio-even, div.audio-title, etc. Can you link me to that CSS file?

        1. HI Eric,

          Here’s the CSS:

          /* WP 3.6 Native Audio Player color */
          #example1 .mejs-controls,
          #example1 .mejs-mediaelement,
          #example1 .mejs-container,
          #example2 .mejs-controls,
          #example2 .mejs-mediaelement,
          #example2 .mejs-container {
          background: url(”) !important;
          background-color: #C8E1FA !important;
          }

          #example1 .mejs-controls .mejs-button button:focus,
          #example2 .mejs-controls .mejs-button button:focus {
          outline: none;
          }

          #example2 .mejs-controls .mejs-time-rail .mejs-time-current {
          background: #00a;
          }

          #example2 .mejs-controls .mejs-time-rail .mejs-time-loaded {
          background: #ccc;
          }

          #example2 .audio-even .mejs-controls,
          #example2 .audio-even .mejs-mediaelement,
          #example2 .audio-even .mejs-container {
          background-color: #C8E1FA !important;
          }

          #example2 .audio-odd .mejs-controls,
          #example2 .audio-odd .mejs-mediaelement,
          #example2 .audio-odd .mejs-container {
          background-color: #DFEFFF !important;
          }

          #example1 .mejs-currenttime,
          #example1 .mejs-duration,
          #example2 .mejs-currenttime,
          #example2 .mejs-duration {
          color: black !important;
          }

          #example2 .mejs-controls .mejs-button button {
          background-image: url(‘https://www.brianshim.com/webtricks/wp-content/uploads/sites/2/2013/08/controls-dark.svg’) !important;
          }

          #example2 .mejs-controls .mejs-time-rail .mejs-time-total {
          background: #AAC7E3 !important;
          }

          /*
          #example2 .audio-odd .mejs-controls .mejs-time-rail .mejs-time-total,
          #example2 .audio-even .mejs-controls .mejs-time-rail .mejs-time-total {
          background: #AAC7E3 !important;
          }
          */
          .audio-title {
          font-weight: bold;
          }

          .audio-controls {
          max-width: 500px !important;
          }

          .audio-player {
          margin: 20px 0;
          }

          .audio-even {
          background-color: #C8E1FA;
          padding: 8px 0 5px 10px;
          border-bottom: 1px solid white;
          max-width: 530px;
          margin-left: auto;
          margin-right: auto;
          }

          .audio-odd {
          background-color: #DFEFFF;
          padding: 8px 0 5px 10px;
          border-bottom: 1px solid white;
          max-width: 530px;
          margin-left: auto;
          margin-right: auto;
          }

          /* hide More Content at the bottom in favor of plugin */
          .more-content {
          display: none;
          }

          Thanks,
          Brian

  4. Hi Brian,
    thank you very much for your great tutorial, I guess the only one to deal with the audio player in such detail.
    I was able to change colors and got rid of the rather old school gradient buttons by using an online svg editor.
    I would like to simplify the look even more by hiding the mute button and volume slider (those are OS functions in my opinion) while maintaining the original width. May I ask you to help? (I would not hesitate and donate some $ to your Paypal account :-)

    Thanks for your time,
    Kay

    Hamburg, Germany

    1. Hi Kay,

      You can do it with this CSS:

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

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

      I did this by manually copying the results from Chrome developer tools (press F12 on PC or CMD-Option-I on Mac), so I might have made a typo… Double check by using Chrome or Firebug.

      Brian

  5. Thanks for these useful tips. I’m filing this away for later use, because as much as I like the audio support you are right it sticks out painfully. Thanks again!

  6. Dear Brian,

    I stumbled across your site because for months I’m looking for a solution I can’t find.

    When I use my Opera browser to show any page with the WordPress Media Player in it, I can’t see neither its controls nor the time bar or any other of its contents. I just can see a black bar (or, with your examples, different kinds of an otherwise colored bar), that is, the background of the mejs-controls div..

    Mozilla works fine – but only as long as I load the page from the net: when I save the page at my desktop and try to open it via Mozilla the same thing happens – no controls, no time bar, no content at all, just the bar.

    Looking at the source code reveals something strange is happening: the code nested in the div’s nested in the div of class “mejs-inner” is ignored. That means, f. i., instead of

    […]


    00:00

    […]

    I can only find:

    […]

    with the div of class “mejs-controls” being empty.

    Do you have a guess ?

    Thank’s for reading,
    Kai

    1. Well, I have to try again:

      Dear Brian,

      I stumbled across your site because for months I’m looking for a solution I can’t find.

      When I use my Opera browser to show any page with the WordPress Media Player in it, I can’t see neither its controls nor the time bar or any other of its contents. I just can see a black bar (or, with your examples, different kinds of an otherwise colored bar), that is, the background of the mejs-controls div..

      Mozilla works fine – but only as long as I load the page from the net: when I save the page at my desktop and try to open it via Mozilla the same thing happens – no controls, no time bar, no content at all, just the bar.

      Looking at the source code reveals something strange is happening: the code nested in the div’s nested in the div of class “mejs-inner” is ignored. That means, f. i., instead of

      [...]


      00:00

      [...]

      I can only find:


      [...]

      with the div of class “mejs-controls” being empty.

      Do you have a guess ?

      Thank’s for reading,
      Kai

    2. I’m sorry, I’m not familiar with the technique to post code in the comments section !
      Last try:


      Looking at the source code reveals something strange is happening: the code nested in the div’s nested in the div of class “mejs-inner” is ignored. That means, f. i., instead of

      […]
      \
      \
      \\
      \
      \
      \
      00:00
      \

      \
      […]
      \
      \\

      I can only find:

      […]
      \\
      \\

      with the div of class “mejs-controls” being empty.

      Do you have a guess ?

      Thank’s for reading,
      Kai

    3. It’s a little bit embarrassing. Please feel free to delete my posts. I’ll try again at a better time.
      Thank you.
      Kai

  7. Hi Brian,

    Thank you for your article.

    Quick question – how did you make the play look that good under the title Time to Get Creative!

    Please could you share the code with me?

    Thanks,

    Ben :)

    1. Hi Ben,

      You are welcome to look at the source code for this page to see how I did it. To see the source HTML, press CTRL-u on PC (Chrome) or CMD-OPTION-u on Mac Chrome. Other browsers might be slightly different. To see the CSS, you can user the browser’s inspector, or just look at my CSS file, which will be linked to in my source code.

      – Brian

  8. Very, very useful to me and my online community radio station. The only part I can’t seem to get working is the darker controls. I downloaded the svg and uploaded it to a directory on my server, but am not sure how to get the relative path correct. Any advice is appreciated. Thanks.

    1. Hi Rick,

      Glad it was helpful. Usually, in CSS files, the directory path can be relative to wherever the CSS file is. So, if your image file is in a directory called “images” in the same directory as your CSS file, you can refer to it using url(‘images/your-image-name.svg’).

      Hope that helps,
      Brian

  9. Great article. I’m looking for a way to have JUST the play button visible. I’d like to multiple play buttons in a table next to song details, etc., and need just the play button, preferably in a circle, but a square will do to. Any way to disable all the other features of the player? Thanks so much!

    1. Hi Quest,

      By experimenting with the browser Inspector, I was able to get rid a lot of the elements of the player by adding “display:none;” to various elements, and removing the widths.

      But, in your case, you might want to look for a completely different plugin that is closer to what you want from the start.

      Thanks,
      Brian

  10. Brian
    I cant get it working
    On top of the page i places the styleoptions
    and in the body
    echo “”;
    echo do_shortcode(‘[audio src='.$nummer.']‘);
    echo “”;
    but i does not work
    what do i doing wrong?
    greetings Jos

    1. Hi Jos,

      You should look at the code that is generated by this PHP. You will see that it is missing quotes around the MP3 filename inside the do_shortcode call. You should add double quotes around the filename.

      Thanks,
      Brian

      1. Brian
        On my own webserver -and outside WordPress – everything works fine en the css is working.
        Uploaded in WordPress nothing happens.
        Do you know why this is?
        Jos

        1. As I mentioned, if you look at the source for the popup, you will see that the src parameter is lacking quotation marks (line 50). That might be causing the problem in some browsers. Try adding quotation marks in your PHP code.

          Thanks,
          Brian

  11. Hi Brian! Thank you so much for your explanations, they are a GREAT help!
    I used your tutorial to customize the player on my site. Huge improvement!
    Only until now I couldn’t get your js working.
    The script is in the header.php right after the meta-tags and the first audio-shortcut looks like this: [audio mp3="http://www.bernhard-landauer.at/wp-content/uploads/2013/11/Sanctum_et_terribile.mp3"][/audio]
    Just, no difference…
    What can I do?
    Thanks again!
    with best wishes
    Bernhard

    1. oh, the div is not visible in the html i pasted into my message. I’ll try again here without the “”
      div class=”audio-controls”>[audio mp3="http://www.bernhard-landauer.at/wp-content/uploads/2013/11/Sanctum_et_terribile.mp3"][/audio]</div

      1. Hello, Brian!

        Thank you for your kind reply! That’s great!
        The page is here: http://www.bernhard-landauer.at/?page_id=821
        Sofar I have only added the for the first player
        – since its not working yet I didn’t proceed with the remaining seven…

        The js (copied from your page and pasted between the and -tags
        in my header.php is:

        //

        Thank you again!
        with kind greetings from Austria
        Bernhard

    2. Hi Bernhard,

      Ah, I see the problem. It seems that in your page, the javascript code comes BEFORE the code that loads the needed jQuery plugin. Try placing the code somewhere else, like at the bottom of your post or the footer. You can put this code in your post and it will be invisible.

      Thanks,
      Brian

      1. Oh, surprising! I thought the code always needed to come first!
        I placed it at the end of the wrapper now and it works fine, hooray!
        Thank you again! You’re a hero!
        B

        1. Oh, and even better:
          Now I simply wrapped the whole main content of the page in the div instead of every single player and like that everything together loads with the correct css, just a little bit later but fine!

  12. Hey Brian,

    Great tutorial! I stumbled across your post after I had already enqueued my own css for the media player but still needed some help preventing that unsightly default styling flash. I’m wondering if there’s a way to add a couple more lines of jQuery in order to avoid wrapping each shortcode with a div, though. If it were my website I was coding, I’d give in and wrap the shortcodes. But I’m working on a client’s site and I don’t want to layer anymore complexity beyond importing the audio. Any thoughts? Thanks!

    1. Hi Timothy,

      Thanks for the comments! You know, now that I look at the source code, it looks like all of the instantiations of the audio player are already wrapped in a “wp-audio-shortcode” class. You could probably just use that in the jQuery instead of wrapping each shortcode in your own div.

      Give it a try and let me know if it works!!

      Thanks,
      Brian

Leave a Comment or Ask a Question

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