Word Press media Player with Custom Styling and Colors

[Keith Key]

An example of this is on my site : http://www.melechhaolam.net/shalomaleichem
The source information came from : http://brianshim.com/webtricks/style-the-wordpress-3-6-media-player/

As you upload the Media file and have it selected make sure to choose under Attachment Display Settings set Embed or Link to “Embed Media Player”.

The Short code can be used : Or more simply Click the “Add Media” from the Page or Post editing menu.
Which inserts something similar to:
[audio mp3="http://www.melechhaolam.net/wp-content/uploads/2014/10/shabbat_shalom-aleichem.mp3"][/audio]

Here’s your Color changing and styling for the Media Player:

Put this in the Custom CSS block located in the DASHBOARD/APPEARANCE/THEME OPTIONS/Click STYLING TAB up top/CUSTOM CSS block at the bottom and save it to change the Color of the WordPress Media Player!!

/* 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;
}

[Keith Key]

This is the line you modify the color with, just change the #C8E1FA to the color you wish to use.

background-color: #C8E1FA !important;

[Bill Robbins]

Thanks for sharing Keith 🙂

[Author]

Posts