-
Hi. I submitted this question last week, but it seems to have disappeared. On mobile only (phone), the other content on the page scrolls over the top of the video player while playing.
Curiously this does not occur on the homepage, but this problem does occur on all other pages. Like this one for example:
https://guitaranimal.com/learn/nothing-compares-2-u/prince/Thank you for any help you can provide.
Debbie McCormick
-
-
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
Thanks, but I’m still unable to locate the orginal thread to see your answer. It does not show up in the list, and the link you provided is a 404. Can you let me know what your answer was please? Thank you.
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
iPhone XS Max
Thank you.
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,
MartinHi Martin,
The screenshot that I provided was with iOS 12.3.1.
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,
MartinI do not use any mp4 videos. Just YouTube. I do not have this issue on my 12″ iPad Pro 12.3.1, but it does persist on iPhone 12.3.1. I have complaints from my customers on this as well.
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,
MartinThanks Martin. Unfortunately I’m not that great with JavaScript, but I do know CSS quite well. I did try changing the z-index on the element where the player is placed, but that did not help. Any other advice would be greatly appreciated.
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
