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

Video disappears when switching to fullscreen from modal window

Hi all,

in an Ember.js project, I am loading JW Player inside a modal window provided by Semantic UI (http://semantic-ui.com/modules/modal.html).

Loading and playing work as expected, but if I click the fullscreen button, the modal and video disappear from the screen (although it’s still playing because I can hear the audio track). If I exit from fullscreen, both the modal and the video come back.

I have put together a simpler test case that does not use Ember, but that exhibits what I think is a similar problem. You can grab the code here (remember to add a valid JW Player API key): https://gist.github.com/michelegera/c888245b2347e3a9fe0a

If you click on the button, a modal with a video should open. Play the video and then switch to full screen, you should see the erratic behaviour.

Is there any way to fix this?

Thanks,
Michele

3 Community Answers

Up Down

Carolyn Ganon

JW Player Support Agent  
1 rated :

Hi Michele,

I took a look at your sample implementation and it appears that a lot of the underlying code that comes with the semantic UI library is overwriting the player fullscreen styles. The semantic modal basically makes itself fullscreen and has a lot of !important width and height styles that break everything on the page when they are taken out. So when the player tries to go fullscreen on top of the fullscreen modal, it breaks.

To solve this problem, you can dig into the stylesheets and change the underlying Semantic code or you can simply remove the fullscreen button from the controlbar with the removeButton() javascript api call (http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference#controls)

Hope this helps! Let me know if you have any more questions.

Best,

Carolyn Ganon
Customer Support Engineer
JW Player

Up Down

techadmin

User  
0 rated :

Hi Carolyn,

thanks for your answer, I will try to see if I can work around the issue.

In the meanwhile, I am trying to remove the fullscreen button.
The docs say to pass the removeButton() function “the id used to identify the button when it was added”.

How do I get that information, since I didn’t add the button myself? Are default skin buttons documented somewhere? I tried 'fullscreen' and 'jwfullscreen', but with no luck.

Thanks,
Michele

Up Down

Carolyn Ganon

JW Player Support Agent  
0 rated :

Hi Michele,

You can also try this: document.querySelector(‘.jwfullscreen’).remove()
Unfortunately, this doesn’t work when the player is in flash mode.

The good news is the next player release will include a css-based skin for flash and HTML5 so the fix for this is on its way!

Hope this helps! Let me know if you have any more questions.

Best,

Carolyn Ganon
Customer Support Engineer
JW Player

This question has received the maximum number of answers.