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

Moving the PLAY button

I have a web site that embeds JW player dynamically via an iFrame which I pass the screen dimensions to. This all works good. However, as no mobile devibe allows for autoplay, when the iFrame id dynamically generated before the videos play it presents a PLAY button... however, the video dimensions of the frame that holds the PLAY button is much larger than the dimensions that the video will play in. it seems that the PLAY frame presented in mobile is not reading the iFrame dimensions. The only real consequence to this is the PLAY button is not visible because it always appears in the middle of the frame, and as the frame is so large it is off the screen. The quick fix, i assume, would be simply to move the PLAY button to the top-left the video frame. The other option woudl be to somehow tell that pre-play frame what the dimensions should actually be, but this requires mnay extra steps as I am updating the DOm with JS I woudl need to first make an AJAX call to the server and have a php file set a cookie and then to a page refresh, or some such headache. So for now it would be much easier to just move the location of teh PLAy button. However, I see that the location of the PLAY button is not in a CSS file but in the jwplayer.js directly. So, how can I override those CSS dimensions that are in there?

I tried an expernal CSS declaration of .jw-display-icon-container{position:relative;top:10% !important} but that did not work.

Any clues how to control where the PLAY button appears?


1 Community Answers


JW Player Support Agent  
0 rated :

Can you post a link to a page where we can reproduce this?

One of our product managers wrote a blog post that demonstrates how to manipulate the play button via CSS. You should be able to change the position using similar methods. Please see for more details.

This question has received the maximum number of answers.