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

Remove tinted overlay on embedded player

I have tried all types of CSS to solve this, but can't seem to nail it down.

I am using JW Player 8. I just use the skin options provided in the dashboard. I am trying to remove the tinted overlay that is always there when the player is not playing. I have a brightly colored poster image and the overlay is making it look dark and drab and I would just like to remove it so the poster image is bright and clear.

I turned off controls in the skin options and then I was able to get what I want, but then there is no play button to start the video.

I'm just looking for some CSS to turn off the overlay. Thanks in advance if you can help!

9 Community Answers

Up Down

Timoor Kurdi

JW Player Support Agent  
1 rated :

Hi,

My name is Timoor Kurdi and I’m a Support Engineer at JW Player.

Without having a link or looking at the page would make it harder for me to provide help since there could be some custom CSS that would need to be taken into account.

But, in general, the CSS that needs to be removed is:

.jw-controls-backdrop {
background: none;
}

Regards,
Timoor Kurdi
Support Engineer

Up Down

r...

User  
1 rated :

Hello I've been searching for days for this same answer and I'm using Squarespace so I'm not sure exactly where the CSS code goes for the JW Player.

Here is a link to the page where I have the player embeded in a Squarespace Code Block: https://members.objectivepersonality.com/test

Here is the code I inputed and the player plays fine but the overlay is still there and very dark and drab:
<style>
.jw-controls-backdrop {
background: none;
}
</style>
<div style="position:relative; padding-bottom:56.25%; overflow:hidden;"><iframe src="https://content.jwplatform.com/players/7Il87lSi-L5pnhIvX.html" width="100%" height="100%" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe></div>

I'm assuming I'm inputing the code in the wrong place but I could use some help as to what to do to get the dark screen removed.

Thanks in advance!
Shannon

Up Down

Timoor Kurdi

JW Player Support Agent  
1 rated :

I’m not sure where you are adding the code since I am not familiar with Squarespace, I recommend reaching out their support team for help or asking a question on StackOverflow, but I did inspect the code and the background is not currently set to none.

Up Down

r...

User  
0 rated :

Ok... I'll go see if I can find someone who'll know.

While I'm here, what would be the css to change the faded dark overlay behind the controls once the video starts playing?

I like the fade but it goes half way up the video which is super weird and I'd rather it be gone if I can't adjust the height.

YouTube has this same fade, but it only spans the controls area which looks clean.

Thanks in advance!
Shannon

Up Down

Timoor Kurdi

JW Player Support Agent  
0 rated :

I believe this code should definitely get you started.

.jw-controls-backdrop {
background: none;
}

Up Down

a...

User  
0 rated :

The answer is in this thread and does work: https://support.jwplayer.com/customer/portal/questions/17163669-transparent-background-for-controls

The only issue now, is the HD thumbnail we manually posted seems very low resolution for some reason.

Up Down

Timoor Kurdi

JW Player Support Agent  
0 rated :

Do you have a link I can take a look at?

Up Down

Cory Bitner

User  
0 rated :

I am the original poster. I came back to this today and went through all the suggestions in this thread. None of them work.

I would like to remove the tinted overlay when the video hasn't been clicked on yet, as well as when it is playing and the controls are showing. It really makes the video and poster image look "drab" as Shannon stated earlier.

I am trying the following CSS in all types of combinations in the CSS in my child theme, as well as through the wordpress customizer and none of it is doing a thing. I use CSS all the time and have changed loads of choices, but I just can't seem to get the JWPlayer to react to any CSS.

I tried this:
.jw-controls-backdrop {
background: none;
}

I tried this:
.jw-state-idle .jw-controls {
background: rgba(0,0,0,0.0) !important;
}
.jw-controls-backdrop {
background: rgba(0,0,0,0.0) !important;
}

Again, I am using the JWPlayer hosted player with a player I customized through the menu system in JWPlayer and then I am embedding on a wordpress site.

Any other solutions or thoughts?

Thank You!

Cory

Up Down

Timoor Kurdi

JW Player Support Agent  
0 rated :

Oh you are using wordpress… A wordpress theme is it’s own environment and has it’s own rules, I’m not sure where the CSS needs to be added and what the rules are around it. Check out the wordpress codex -
https://codex.wordpress.org/ which is like a manual for wordpress.

This question has received the maximum number of answers.