Docs

[streetberlin]

Hi guys,

I would like to change the controls for the embedded video player

https://webseiten-express.com/

1. Change background color /currently some sort of grey

2. Change background hover color

3. Increase the height of the control panel

4. Have big play button, semi transparent in the center With color style option color, background bothe hover and non hover, Thank you so much

[Nico]

Hi There,

Thanks for writing in.

1. Add this in your customizer > custom > CSS:

.mejs-controls{
background-color: rgba(0,0,0,0.9); // color black but a little bit transparent. Adjust its rgba or add HTML code color to change the background
}

2. Not sure which part is to be change with the hover color.

For button hover color you could use this code below:

.mejs-button button:hover{
    color: rgba(255,255,255,0.5);
}

3. Use this code below to adjust the control panel size:

.mejs-video .mejs-controls {
    width: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 32px !important;
}

4. Would you mind sharing us an example of what you want to achieve here. Thanks.

Let us know how it goes.

Thanks.

[streetberlin]

Thanks for getting back to me so fast. I need some more help

A. Changing Height – need Height /size change of Control Icons as well

.mejs-video .mejs-controls {
width: auto;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 32px !important;
}

This adds just a colored padding, the height changes, the symbols, play button etc do not get bigger, how do increase the button size, time rail etc. The control icons need to change accordingly to height

B Change Color of Controls
Also I need to change the *color* of the triangle in the play button, the time rail, the numbers of the time, all currently grey

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.mejs-button.mejs-play button:before,.mejs-button button:before,.mejs-button.mejs-mute button:before {
    font-size: 35px;
color: red;
}
.mejs-time-loaded, .mejs-time-total,color: red; {
    height: 21px;
}

.mejs-time-loaded {
    background-color: red;
}

Hope that helps.

[Author]

Posts