Interactive Video fullscreen mode on iOS has poor UX

Submitted by m_h5p on Mon, 04/08/2019 - 11:42
Forums: 
Bugs in content types

Hi,

1. When you enter fullscreen mode in iOS for the Interactive Video content type, the address bar on top as well as the safari controls on the bottom are still displaying (see screenshots attached) and taking away a major part of the screen space, which makes the fullscreen mode pratically useless in landscape mode. Additionally, in Safari you are able to scroll up and down in fullscreen mode as the video is not fixed to width:100% and height:100%.

2. Wordpress 5.0.2.
3. mobile (iPhone 6 on iOS 12.1.4)
4. Browser: Safari and Chrome (on iOS)
5. Interactive Video (1.20.4)

Attachments: 
Image icon ios_safari_1.png
Image icon ios_safari_2.png
Image icon ios_chrome.png
Content types: 
Interactive Video
BV52's picture

BV52

Tue, 04/09/2019 - 03:18

Hi m_h5p,

Do you have a test site that we can check. I can't reproduce this on portrait mode on the sample contents in H5P.org nor contents that I created.

-BV52

m_h5p

Tue, 04/09/2019 - 08:27

Hi BV52,

thank you for the quick reply! I was specifically talking about landscape mode only (as mentioned in the bug report), portrait mode works fine. I have the same issue on h5p.org sample content.

You might have enabled Fullscreen API on your iPhone > Settings > Safari > Advanced > Experimental Features, which makes fullscreen mode for H5P somehow work. However, I can‘t really expect users to have this enabled.

BV52's picture

BV52

Tue, 04/09/2019 - 08:38

Hi m_h5p,

Sorry I meant landscape (but typed portrait coffee might not kicked in yet). However I am using an emulator not an actual device so it should be in the default setting. Anyway let me double check and will get back to you once I have something concrete.

-BV52

otacke's picture

otacke

Thu, 08/27/2020 - 11:05

Hi all!

Sorry for the late reply, just found this by chance.

I agree, it's poor UX, but it is nothing that the H5P core team can fix. It seems that the culprit is a small company in Cupertino selling something with fruit.

On iPhones, Apple does only allow the regular HTML5 <video> element to go to fullscreen (see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Browser_compatibility). H5P does require its own interface though that "surrounds" this <video> element, that cannot be set to fullscreen mode on iPhones, so H5P already has to use a workaround to simulate a fullscreen as good as possible.

Apple would have to enhence the support for JavaScript's FullscreenAPI on iPhones, too. There are others requesting this, too. Not sure why the iPhone seems to be the only device that's deviating from the web standard here.

Best,
Oliver