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

Setting player height as 100% causes iOS Safari cycling fullscreen bug.

Good afternoon, and apologies if the topic isn't correct for this question.

I am building a site with the JWPlayer as a featured video player that must always be 100% width and height of the viewport (regardless of device).

Inside .setup() I set width and height as '100%' to match the size of the containing element (which is 100vw/vh).

This sets the size of the video as desired, but this seems to cause an issue in iOS Safari.

In iOS Safari as I'm sure you're aware, any played video is displayed in fullscreen in the native quicktime player.

However, when exiting fullscreen a sequence of events occurs;

1. The video video is paused.
2. Quicktime exits fullscreen.
3. The video begins playing again immediately.
4. Quicktime enters fullscreen.

This is a sequence of events that can go on forever. As the user attempts to pause/minimise the video, the JWPlayer begins playback again and thus opens up the Quicktime player in fullscreen.

The reason I mention the dimensions of the player in .setup() is because if I set the height of the player as a pixel value instead of a percentage (currently with container.height()) then the issue does not occur.

Even if 100% height calculates to the same value as container.height(), the problem only occurs when using the percentage value.

I haven't been able to pin down if there is another element at play here unfortunately, only that by setting only the video source and player dimensions causes the issue in iOS Safari.

I hope I have been abel to explain the issue thoroughly, though I can give more details if needed.

2 Community Answers


JW Player Support Agent  
0 rated :

If I remember correctly, Safari doesn’t like anything set to height: 100%. I found a few similar threads on StackOverflow (but not related to our player).


0 rated :

Perhaps that's where I had a hiccup then, I was searching explicitly for issues related to the player rather than Safari as a whole.

This question has received the maximum number of answers.