Style the WordPress Media Player (Classic Editor Only)

This article describes how to style the audio player in the WordPress Classic Editor (it uses MediaElement.js). Note, if you upgrade to Gutenberg, these styles will no longer work!

The Gutenberg player uses the HTML audio element. If you want to style the  Gutenburg player, check out this article.

The Basic Shortcode

You can invoke the player in the Classic Editor by using a shortcode like this:
audio_shortcode

A nifty audio player appears like this:

Some CSS to Jazz It Up

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:

Changing the Control Colors

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)

Featured Image Photo by Scott Major on Unsplash

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

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

201 Comments
Inline Feedbacks
View all comments
Stas
Stas
1 year ago

Hi Brian. How to stop playing the current track when a new one is playing?

Celebnob
1 year ago

Yea. Thank you this really help me

James
2 years ago

Hi Brian, your posts are an excellent repository of information! I’m really enjoying your site, thank you so much!

I’ve just been playing around with changing the colour of the player, which works great, however is it possible that I could keep the default colour scheme on my main some pages, but use an amended one for others?

For example, on this page I’d like to keep the dark player (wait for the second slide): https://www.thirdcirclerecordings.co.uk/

And on my blog posts I’d like the new amended one (see end of post): https://www.thirdcirclerecordings.co.uk/2020/11/25/why-i-love-recording/

Could you offer any help? I’ve been struggling with it for hours!

James Gasson
2 years ago
Reply to  Brian Shim

Thanks for your reply Brian, most helpful. Could I ask, how might I exclude the CSS for a particular page? I would like the new light colour scheme as the default for audio players around the site, however on the home page I’d like it to default to the original dark player.

Great big thank you hugs,
James.

James Gasson
2 years ago
Reply to  Brian Shim

I tried that but the styling for the home page player seems to get overridden by the styling that follows it.

Am I missing something?

/* WP 3.6 Native Audio Player styling* HOME PAGE/

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

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

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

/* use a sprite file with darker transport icons */
.home
.mejs-controls .mejs-button button {
background-image: url(‘https://www.thirdcirclerecordings.co.uk/wp-content/uploads/2021/08/mejs-controls-dark.png’) !important;
}

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

/* change the color of the current time bar */
.home
.mejs-controls .mejs-time-rail .mejs-time-current {
background: #3333ff !important;
}

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

/* WP 3.6 Native Audio Player styling*/

/* change the color of the background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url(”) !important;
background-color: #34F5F8 !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://www.thirdcirclerecordings.co.uk/wp-content/uploads/2021/08/mejs-controls-dark.png’) !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: #ffcc33 !important;
}

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

James Gasson
2 years ago
Reply to  Brian Shim

Perfect, perfect, perfect! Thanks Brian, very much appreciated!

Caetlyn
3 years ago

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.

Giles
Giles
4 years ago

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

Adam
4 years ago

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!

Rose Musics
4 years ago

very very nice thanks.

Jason
Jason
4 years ago

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

J.
J.
4 years ago
Reply to  Jason

I hope you can answer my question?

Brian Shim
Brian Shim
4 years ago
Reply to  J.

Please post the URL of your site.

Thanks,
Brian

J. Hendrikszoon
J. Hendrikszoon
4 years ago
Reply to  Brian Shim

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

nicolekowalczykNicole
nicolekowalczykNicole
6 years ago

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.

customsongworkshop
6 years ago

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!

customsongworkshop
6 years ago

Oops! My website might help…

https://www.customsongworkshop.com/

Josh Klauder
Josh Klauder
6 years ago

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.

customsongworkshop
6 years ago
Reply to  Josh Klauder

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!

Catherine
7 years ago

I sure hope that ‘maybe’ is “maybe tomorrow or next week” ;)

Catherine
7 years ago
Reply to  Brian Shim

Wow. Thanks for this. You really saved the day! Now off to change my site…

wentworthcatherine
7 years ago
Reply to  Catherine

Never mind … I was replying too early in the day (wasn’t awke yet). Sigh ….

Joel D Canfield
7 years ago

Viewing this post in Chrome on my Mac here in early 2017, all the players look exactly like the default.

What am I missing?

Joel D Canfield
7 years ago
Reply to  Brian Shim

I hate it when that happens ;) Looks good now.

Culture Leak (@CultureLeak)

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?

chefjoef
chefjoef
7 years ago

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)

Anonymous
Anonymous
5 years ago
Reply to  chefjoef

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

div::first-letter {
display:none;
}

but I don’t have that working yet.

Pete Edmunds
7 years ago

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

Iain
7 years ago

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