This tutorial shows how to style a WordPress audio player so that the cover art image spins (with CSS animation) when the audio player is displayed in your post.
⚠️ Requirement:
You must use a compatible audio player plugin (the original tutorial refers to “the Audio Player Plugin by Pedro” — a plugin that provides a customizable audio player with download button).
📌 Steps to Add CSS for Spinning Cover Art
-
Log in to your WordPress admin dashboard
-
Go to Appearance → Customize
-
Scroll down and click Additional CSS
-
Paste this CSS code:
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
background: #06801e;
}
.njl-music-widget .mejs-container {
margin: 0 !important;
}
.njl-music-widget .artwork {
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
float: left;
top: 10px;
line-height: 0;
margin-right: 5px;
margin-bottom: 15px;
width: 100px;
height: 100px;
border-radius: 100px;
border: 5px solid white;
border-left-color: green;
border-right-color: green;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
@keyframes spin {
100% { transform: rotate(180deg); }
}
.njl-music-widget .details {
display: block;
overflow: hidden;
margin-bottom: 10px;
color: #fff;
padding-top: 17px;
padding-left: 100px;
}
-
Publish your changes
Now your audio player’s cover art (class .artwork) will continuously rotate using the spin animation.
🧠 How It Works
-
The CSS targets the audio player’s container classes and styles the cover image.
-
It uses a CSS animation (
@keyframes spin) to rotate the image. -
You can edit colors, borders, and animation duration to fit your site design.