Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Transparent controll bar using CSS

Hello, JW Player Community.
How I can make my controll bar transparent using CSS? If this is possible.
I wan't something like Youtube player. (Sorry for my bad english)

I already changed the play button using this:

.jw-skin-seven .jw-display-icon-container {
opacity: 0.7;
width: 110px;
border-radius: 10%;
border-width: 2px;
border-color: #fff;
}

.jw-display-icon-container .jw-icon-display {
font-size: 1.5em;
}

.jwplayer:hover .jw-display-icon-container {
box-shadow: 0px 0px 15px #ffffff;
opacity: 1;
}


Thanks.

1 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi there,

The default behavior is for the control bar (.jw-controlbar) to respect the color setting applied to the .jw-background-color property, which is:

background-color: rgba(33, 33, 33, .8);

To override the opacity, you can apply a new background color, with a different alpha value, to the .jw-controlbar with the !important flag, like this:

.jw-controlbar {
  background-color: rgba(33,33,33,.4) !important;
}

Add the above CSS to your page will cause the control bar to appear with half the opacity as its default.

Please let me know if you need any more help or have any other questions.

Thank you!

This question has received the maximum number of answers.