changing audio player colors

WordPress makes it easy to add an mp3 player to our post and pages, but it can be a bit boring.

You can make the player stand out by tweaking the css.

This is an image of the standard player that comes with WordPress

standard player

and here is my modified player

You can use a plugin to set custom css code (I use simple custom css)

/* yellow focus */
.mejs-controls .mejs-button button:focus {
outline: none !important;
}


/*background color*/
.mejs-controls,
.mejs-mediaelement,
.mejs-container {
background: url('') !important;
background-color: red !important;
}


/* text color */
.mejs-currenttime,
.mejs-duration {
color: white !important;
}

.mejs-horizontal-volume-current
{
background:#0073aa!important;
}

1 thought on “changing audio player colors”

  1. Hi William, nice code. It was a starting point to achieve what I needed. I added some radius to make the player more good looking.

    /* Amarillo al enfocar */
    .mejs-controls .mejs-button button:focus {
    outline: none !important;
    }

    /* Color de fondo con bordes redondeados */
    .mejs-controls,
    .mejs-mediaelement,
    .mejs-container {
    background: url(”) !important;
    background-color: red !important;
    border-radius: 10px; /* Puedes ajustar el valor segĂșn tus preferencias */
    }

    /* Color del texto */
    .mejs-currenttime,
    .mejs-duration {
    color: white !important;
    }

    /* Volumen horizontal actual */
    .mejs-horizontal-volume-current {
    background: #0073aa !important;
    }

Leave a Comment

Your email address will not be published. Required fields are marked *