CODEWITHSUNDEEP
javascripthtml5-audiomediaelement.js
raphael_turtle
raphael_turtle

Reputation: 7314

Change the colour of Mediaelements.js player

How do I change the colour of the mediaelements.js player? It's black but I need to change it to blue...

Ideally I'd like the black background to be transparent and just show the progress bar.

Upvotes: 0

Views: 2426

Answers (2)

Ali
Ali

Reputation: 72

My solution -- make sure to insert this style AFTER the media element's default style. It will overwrite the background image that was previously set, with a color for the control bar background:

    .mejs-container .mejs-controls {
        background: red;
    }

Upvotes: 0

TheOnlyError
TheOnlyError

Reputation: 1451

You only need to change a few lines in the css file named mediaelementplayer.css located in src/css:

First find the line .mejs-container { and comment out the background-color property like so:

/*background: #000;*/

Next, find the line .mejs-container .mejs-controls {, should be at 150. Then remove all of the background properties, these ones:

background: url(background.png);
background: rgba(0, 0, 0, 0.7);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));

Replace them by the following line:

background: transparent;

Make your you use the right css file where the attributes have been changed.

Upvotes: 1

Related Questions