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

Custom CSS for Play Button

I'm doing a PNG image for the play button on the JW Player. I like the look, but want to change the background that appears on hover (behind the play image) and tell the image to disappear in favor of a circle for the loader graphic on play start.

http://www.traileraddict.com/util/test-iframe.php

So, here are my issues:

1. What is the CSS element that I need to change the background color that appears behind the PNG on player hover.

2. What is the CSS element I need to tell the player to remove the image on play, when the loader graphic starts. And, get the loader to sit more center, as it's a bit off-center (to the left) of the player button.

Feedback appreciated.

Cheers!
Ryan

1 Community Answers

Up Down

Randy

JW Player Support Agent  
0 rated :

Hello,

I believe the background image is set to a transparent state. You should be able to tap into this via the jw-display-icon-display jw-background-color CSS classes. You should also be able to find the image URL here: background: url(//cdn.traileraddict.com/img/playbutton.png);

https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/

Randy

This question has received the maximum number of answers.