Select Page
WordPress Playlist transparent white background

WordPress Playlist transparent white background with 4 mp3 files

I am working on a client site and dressing up a default WordPress Audio Player so that it would have a transparent background.

This example is only about half finished, but the code can be customized to suit on other WordPress Audio players.

 

.wp-playlist-light, .wp-playlist-playing { background-color: rgba(255, 255, 255, 0.85) !important; /* background color transparent white */ color: #000; /* Text color */ }
This is used with

/[ playlist ..... /]

short code generated by WordPress's own built in html5 Media Library playlist capabilities.

I am displaying a playlist not just a single file player.  The css above is for a ‘light’ colored player. You will notice that I utilize !important in several places.  I am running this on a Divi theme and as I design the layouts, the css is initially in the CSS editor for Theme Options. I could move it to a number of other areas where I might not need the !important item to over ride the default CSS.

For ease of development and iterating, this is where I have it for now. You may or may not need to use !important depending on the theme utilized and where you place the css.

WordPress Playlist Player in Divi Slider

I would add that I am running this player in a Divi Slider (Divi Theme with the Slider module and the WordPress media player/playlist in the text section of a slide.

I have noticed that there seems to be a javascript problem with this type of thing. I had wanted to (design purposes and goals of client) to have 3 slides. The slides would have different images, and the same playlist in the same position on each three slides. However, the Divi Slider seems to load the javascript for the playlist each time hiding it from displaying in the background. There is no problem with the first slide, but with each subsequent slide there is definitely a problem and the player appears to break on subsequent slides. So in my case I only have one slide running at the moment…

How can we serve your WP needs?

Need some specific help beyond something in the comments? Let us know how or if we can better serve your needs! Drop us a quick email today.

Email Us

Comments

Responses...