Customizing The Color of Your Embedded Audio Player in WordPress

Helping your social justice blog work for you. Here’s a quick customization resource you can use whether you run a self-hosted website or are hosted through WordPress.com with the custom design option to customize your CSS code.

Currently in WordPress, if you include audio into your posts, a standard black and blue audio player appears, looking similar to the one in the screenshot below:

cropped audio player screenshot

That player worked well enough for me, but over time I began to think that the standard black & blue was inconsistent with the aesthetics I had in mind.

I began wonder if there was a way to change the look and feel of it. I did some digging and found a link with code and instructions and screenshots for changing the color of the audio player that I’d like to share with you.

 

If you visit the article you’ll find the tutorial I used to modify N.A.H.’s audio player’s color scheme from the original to one that more closely aligned with the colors I use often on the blog. Check it out:

 

It’s a slight change, but if you’ll notice, the color of the player is the same color as my blog’s header, and the color of the the loading audio, as well as the volume are the same shade of green that I use for my links, and throughout my blog’s design.

Now, any of the audio files I use, including my current and future podcasts, will take on this look. If I ever decide to change the color scheme down the road, I now know how to switch it up.

So there you have it. If you’re unfamiliar with the aspects of the code, be prepared to do a bit of experimenting, but with a bit of practice you can make this thing look the way you want it to.

Ubuntu,

From Aspiring Humanitarian, Relando Thompkins-Jones, MSW, LLMSW

—————————————————————————————————————————

—————————————————————————————————————————

Get New Notes in Your Inbox

Enter your email address to have new notes delivered to your inbox.

Written by

I'm a Social Worker, Educator, and Aspiring Humanitarian who is interested in conflict resolution, improving intergroup relations, and building more equitable and inclusive communities. "Notes from an Aspiring Humanitarian" is my blog, where I write about issues of diversity, inclusion, equity, and social justice. By exploring social identities through written word, film & video, and other forms of media, I hope to continue to expand and enrich conversations about social issues that face our society, and to find ways to take social action while encouraging others to do so as well in their own ways.

You may also like...

2 Responses

  1. lorigreer says:

    Very helpful advice. Thank you!

Leave a Reply

Your email address will not be published.