Content scrolls above video player on mobile

Hi Deborah,

We’re really sorry to hear that but the thread haven’t disappeared. I’ve replied to you few minutes after you’ve asked. Here’s link to that forum thread. Please focus your answer into that original thread. I’ll delete this one later today.

Thanks for being part of the Foliovision,

Juraj

Hi Deborah,

Oh, I am sorry for that. Here’s the original answer:

”
I couldn’t reproduce the issue that you’re experiencing. I’ve tested it on iPhone 7+ with Safari and Chrome.

What type of mobile device and browser are you using?

Thanks for the system info.
”

Making the web work for you,

Juraj

Hello Deborah,

I was able to reproduce the issue on iPhone with iOS 11.2, but not on iPad with iOS 12.3.

The iOS 12 finally allowed real fullscreen mode. With older versions we can only provide the pseudo-fullscreen mode where certain elements might appear on top of it if the CSS is not totally clear (improper use of z-indexes). According to some stats over 80% of users are already on iOS 12.

Please let us know what iOS version you are on.

Thanks,
Martin

Hello Deborah,

I’m using iPad with iOS 12.3.1 and it the issue just doesn’t seem to occur.

FV Player has an alternative fullscreen mode setting, but it won’t help in your case as the video is on YouTube.

Does the issue happen even with MP4 videos?

Thanks,
Martin

Hello Deborah,

I missed the fact that the fullscreen on iOS is only supported on iPad and not on iPhone. So what we do for fullscreen is based purely on CSS – the player is set to cover the whole screen and show up on top of everything else.

So it appears your theme is forcing some z-index on the element where FV Player is placed – and then our plugin can’t override that.

FV Player has the “Alternative iOS fullscreen mode” setting, but it doesn’t work for the YouTube videos due to technical limitations.

We would be happy to fix this for you as a service, but our CSS designer is on a vacation.

If you know JavaScript you can perhaps hide these elements which cover the player when it enters fullscreen:

flowplayer( function(api,root) {
  api.on('fullscreen', function() {
    jQuery('.your-elements').hide();
  });
  api.on('fullscreen-exit', function() {
    jQuery('.your-elements').show();
  });
});

Thanks,
Martin

Hello Deborah,

just inspect the element in browser developer tools (you can hook your iPhone to your Safari on macOS) and go up one element at a time until you find some which will have the z-index set, or perhaps some CSS transformation. These prevent Safari from respecting the fixed positioning and z-index required for the pseudo-fullscreen to work.

Thanks,
Martin