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. Thank you so much for this amazing advice! With 700+ posts on my site and oodles of audio files, I did not want to edit in code around each audio link to run yet another new audio player. I’ll be fiddling to come up with something smaller and sleeker, but this is a great start.

  2. Great post! It has been really helpful to me. Thank you so much! I do have a question. I have been looking for a WordPress solution that will allow me to click on a link to an mp3 file–and it will launch a separate window with this player–where I can also add some banner ads underneath the player. Do you know how I can do this? I have seen radio stations use liquid compass player that does this for live streams–however, I have not been able to find a solution for mp3 files. Any help you could offer, I would be very grateful.

  3. Hello and thanks for this enlightening post. How do I get the “Next” “Prev” controls/buttons to show up in the player when I have an audio playlist?

    1. Hi cyberfunk,

      As far as I know, this player only supports one track. You have to use a different type of player to support playlists (for example, Soundcloud; there are probably better ones).

      Thanks,
      Brian

      1. You can create an audio playlist – in my opinion it’s a much better looking player. I’d love to figure out how to get rid of the list number, though…

  4. Your css are fantastic ! thanks a lot for sharing Brian!
    Could you please explain to a newbie how to add the Song Title and the Blue alternate backgrounds ?
    Thanks in advance!

  5. Hi Brian,

    Fabulous post, thank you so much! Just FYI there is a closing bracket missing in your code above. I couldn’t figure out why it wasn’t working until I spotted that. I noticed in the comments somebody else had an issue as well. It’s in the chunk of code for “change the color of the progress bar.”

    I went nuts trying different plugins attempting to get a player that I liked the looks of. Thanks to your post I discovered I don’t need a plugin. I have customized the wp player to match the site. You can see it at ktna.org, for example here: http://ktna.org/2015/03/24/classics-for-kids-the-wizard-of-oz-1/

    Do you know the source of the thin line beneath the center of my player?

    Josh

    1. Hi Josh,

      Thanks for your comments! Glad you got it styled properly – looks good!!

      Can you tell me where the closing bracket is missing? I couldn’t find it.

      I don’t see thin line beneath your player either. I’m using Chrome on Windows.

      Thanks,
      Brian

      1. Hi Tommy,

        First I got an SVG file to use – I think I grabbed Brian’s from above “controls-dark”, but you could also start with the original, found in your wp home directory at /wp-includes/js/mediaelement/controls.svg

        SVG is a text file giving mathematical descriptions of the image to be rendered. I opened my SVG file in a text editor and started messing with it.

        At top of the file there is a list of 21 gradients with their characteristics defined. One approach that I think would work fine would be to change every hex color in that list to #FFFFFF (white) and set all opacities to 1 and all offsets to zero. That would redefine the gradients as going from solid white to solid white.

        That is not what I did, however. I went through the code below that and located the elements that I needed to change, for example play/pause. At the place in that code where it called for a gradient like this: fill=”url(#gradient9)” I changed it to my chosen color, which in your case would look like this: fill=”#FFFFFF”

        I then saved that SVG file in a location OUTSIDE the core files.- I used my child theme folder, since it will not be overwritten.

        It is important to repeat what Brian notes above: You have to do all of this in a way that will not get overwritten by the next wp core update, since all of this stuff is found in the core files.

        First, use your theme css to make the changes, using !important, because it gets loaded before the media player css. (which is a core file)

        In your theme’s style.css, point to the modified SVG file, in it’s safe location.
        Mine looks like this:

        .mejs-controls .mejs-button button {
        background-image: url(‘images/controls-dark.svg’) !important;
        }

        That url is relative to my theme’s style.css, in the theme folder, and thus safe from core updates.

        Sorry if I am belaboring this point, but I’d hate to see somebody do all this work, only to lose it all at the next wp update!

  6. Hi, Brian,

    It’s me again!

    I managed to change the color of most of my default audio player to PINK-ish using your great code above… however, the little line that appears when you click on PLAY button, is still BLUE… can’t figure out why…. And wondering if it’s possible to change the color of the “red” progress thingy which looks like mercury in a thermometer… printscreen here:

    http://www24.zippyshare.com/v/ohnrIRvF/file.html

    I’m gonna change the purplish color later to more a pink shade, but meanwhile, just trying to understand which code affects the color of which part of the audio player, as am not “vocabulary” literate on this technical stuff.

    I also converted my 6-digit colors to 3-digits in an online converter, but the colors are still coming out blue and red.

    Let’s see, not sure if I know how to paste code, hoping PRE works…. excuse me and delete this if it comes out wrong. Thanks:

    /* WP 3.6 Native Audio Player styling*/
    
    /* change the color of the background */
    .mejs-controls,
    .mejs-mediaelement,
    .mejs-container {
    	background: url('') !important;
    	background-color: #c9c !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;
    }
    
    
    /* use a sprite file with darker transport icons */
    .mejs-controls .mejs-button button {
    	background-image: url('https://localhost/Bright_Pathway_Selected_Poems_KM/wp-content/uploads/2015/03/controls-dark.svg') !important;
    }
    
    /* change the color of the progress bar */
    .mejs-controls .mejs-time-rail .mejs-time-total {
    	background: #fcc !important;
    
    /* change the color of the current time bar */
    .mejs-controls .mejs-time-rail .mejs-time-current {
    	background: #fcf !important;
    }
    
    /* change the color of the file loading bar */
    .mejs-controls .mejs-time-rail .mejs-time-loaded {
    	background: #fff !important;
    }
    
    
    

    Thank you, Brian.

    1. Hi,

      I suggest using Chrome Developer Tools to figure this out. On Windows press F12. On Mac, press CMD-ALT-I. Press the magnifying glass button and then click over whatever element you’re interested in on the page to see the CSS behind it..

      Thanks,
      Brian

  7. I cheated! I dropped the darker controls svg manually into the 2015/3/ uploads folder and pasted the url into your code above, and it works!

    Thank you.

    It’s probably not in the database, but I don’t give a damn.

    Have a great day. Really appreciate this code.

  8. This was working great until I got to the “upload” controls-dark.svg to your images folder.
    I’m in WordPress 3.9.3, and I get this error

    “controls-dark.svg” has failed to upload due to an error
    Sorry, this file type is not permitted for security reasons.

    This is why I hate WordPress. I wish I’d never gotten into it. You always always hit a WALL and can’t go any further without HOURS of more research to fix idiotic glitches. And no one’s paying me for this, and other work is going to the dogs in the meanwhile as I burn my time on this.

    ‘Scuse me, been trying for DAYS to make a decent pastel audio player with playlist for the sidebar. GAVE UP and deleted all efforts.

    Now, trying instead to put a SINGLE audio file under each poem on each page, and this is the new wall. Can’t upload the file. WordPress “Security”!

    I’m going back to HTML one of these days soon, as my Aristeer can generate html just as well as it can generate WordPress.

  9. The following style statements will allow you to reduce the vertical size also. You may need to add the “!important” directive but I didn’t find it necessary for these parameters. These values are for a 20px x 20px single button audio player but can be adjusted as you wish. Be sure to set the width and height in the jquery declaration in your html and specify” features: [‘playpause’]” for single button player. Also, specifying the html color as xxxxxx00 will make your player transparent. (its the two 0’s after the six hex digits that does it). Enjoy.

    /* vertical center and reduce vertical size */
    .mejs-container .mejs-controls {
    top: 0;
    height: 16px;
    }

    /* reduce button size and margins */
    .mejs-controls .mejs-button button {
    margin: 2px 2px;
    height: 14px;
    width: 14px;
    }

    /* the following items adjust rails and sliders and are not necessary for a single button player */
    .mejs-container .mejs-controls .mejs-time {
    padding: 5px;
    }

    .mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 1px;
    }

    .mejs-controls a.mejs-horizontal-volume-slider {
    width: 40px;
    }

    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    top: 6px;
    width: 36px;
    }

    .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    top: 6px;
    width: 36px;
    }

Leave a Comment or Ask a Question

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