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

Player breaks when display:none

For our site, I need to be able to hide and show the player, however, using display:none causes the player to break. This appears to happen when I use the xml file, but not when i directly point to an mp4. I am using content stored on the jw platform.

I've created a pastebin that shows the issue. I couldn't put it on jsfiddle because of http/s cross domain issues.

http://pastebin.com/PRjs9Nqm

When the container is hidden, the player completely breaks with no errors. Even If I pause the video before hiding, it will still break. For our site, I'm currently using the old hack of moving it -99999px... which works but isn't ideal

I saw there were other people with similar display:none issues but it's been a while since those posts and a new v7 player, so was wondering if there would be a fix to this issue

8 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

First off, I need to tell you that this functionality is not officially supported by us. We are more than happy to provide you with the CSS classes necessary to attempt to achieve the look and feel of our player that you want, but toggling the visibility of the player using jQuery is not something we normally assist with.

With that being said, I did play around with this for a few minutes and was able to get you a little bit closer to your end goal. I was able to hide and display the player on demand by using the visibility CSS rule, instead of display. The downside of this is I’m not sure of your exact use case, so if you need to remove the actual area of the player and not just hide it and show a blank space, this will not work for you. Also, before playback, it only appears to hide and show the overlay to the player. However, after playback, it will hide and show the entire player.

Please see this test page for an example: http://qa.jwplayer.com/~abussey/61513-display-none.html

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

Thank you!

Up Down

Todd

JW Player Support Agent  
0 rated :

The only difference between the playlist XML link and the direct MP4 is that the XML includes an HLS source, which will be inserted on your page in an <object> tag if you browser does not natively support HLS. I would expect the MP4 to use a <video> tag.

Please check to make sure your CSS changes in jQuery account for this.

Up Down

geek

User  
0 rated :

Hi guys,

So the only real reason we want to use the XML file is so we can have the HLS source to allow for auto quality. This forces the player to use flash, which (I think) is the root of these display issues we're having. If there was a way to get the same functionality but using the html5 player by default, we'd be all for that.

My css uses classes, and I'm not targeting the video player itself, so it isn't being affected by the change between <object> and <video> tags.

I've tried a combination of using position: absolute and top: -9999px, as well as visibility: hidden and opacity: 0 to try to fix the issue. These different strategies all work failrly well, except one glaring bug on Safari. Sometimes when the video changes to a jwplayer video, the audio plays but there's no video. However, if you resize the page, the video suddenly appears.

I'm not entirely sure this bug even relates to showing/hiding the player, as I've tried to always keep it visible and I still get this issue. Unfortunately, I'm unable to get it to happen using small examples.

Here is a video link demonstrating this issue
https://www.dropbox.com/s/is6o7wwurgkp5gx/JWplayer_Safari_blankscreen.mov?dl=0

and you can view the site here to test
http://jwplayer.test.unreel.co

Any help in this would be greatly appreciated!

Up Down

Todd

JW Player Support Agent  
0 rated :

Our player currently requires Flash for HLS playback in Chrome, Firefox, and all but the most recent version of IE. This will change in an upcoming release of the player, but probably not until early 2016. To guarantee that the player stays in HTML5 mode, you would need to build a sources: [] block using the direct MP4 embeds.

Are you able to reproduce the audio but no video issue in a bare bones test page with just the Javascript and HTML necessary to instantiate our player? How about in a generic HTML5 <video> tag?

Up Down

geek

User  
0 rated :

On further testing, I found that the display:none issue happened in chrome, but not safari. The top:-9999px issue is only a problem on safari if the value is too large. However, I had problems with disappearances on iPad across both safari and chrome.

Since it looked like I couldn't resolve these css issues (and debugging on iPads being horrendous) I've changed paths and resorted to using a less elegant solution where I destroy the player whenever it needs to be hidden, and recreate it when needed.

I'll work on getting the barebones demo at some point when I have more time. For now we'll do it this way as it appears to be working in all scenarios

Thanks for your help!

Up Down

Todd

JW Player Support Agent  
0 rated :

Instead of destroying, have you tried pausing the player and resizing it to 0×0? Might be faster and easier than remove() and setup() again…

Up Down

geek

User  
0 rated :

That is an amazing suggestion. Can't believe I overlooked it. It does appear to work fairly well in my quick tests.

However, in the end we are staying with remove() and setup() due to other UI inconsistencies that we didn't want to have show up.

Thanks for your help, though!

Up Down

Todd

JW Player Support Agent  
0 rated :

You’re welome. Please let us know if you have any other questions.

This question has received the maximum number of answers.