Fullscreen button not appearing on mobile devices


the iframe embed method doesn't show the fullscreen button on mobile devices. I've added allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" to the iframe code and now it works on Chrome on Android but not my iPad. 

Any clues on how to make the button show on iPads?


falcon's picture

We removed it because of several bugs in iPad in fullscreen mode. I will check with our "full screen expert" if he has checked the bugs against the latest versions of ios and safari on iPad.

Thank you!

falcon's picture

Sorry, I'm mixing up platforms here. I think it was Safari on desktop that had to be disabled for a while. iPad doesn't support fullscreen. I think it might be because it doesn't have a back button so it is a bit hard for them to make sure that the user can get out of fullscreen again.

Oh. That's a pity. 

Thanks for the info!

I was thinking about it again and it makes no sense that the iPad doesn't support fullscreen in iFrames. 

When I open an interactive video from the CMS directly, the fullscreen button appears and also works. The same button can be used again to exit the fullscreen mode. 

When I open the same video embedded on another site the fullscreen button doesn't appear at all. 

Don't you think that this could be fixed?

falcon's picture

Yeah, ok, I checked and you are right. The iPad uses our own "Semi fullscreen". It doesn't support the HTML5 fullscreen(it isn't really full screen, the toolbar is still there) but we've made a fullscreen that takes up as much space as possible without going into real fullscreen. Semi fullscreen doesn't work when embedding externally. Only real fullscreen. We might fix this in upcoming version but not in the next two releases.
stopbit's picture


Not sure if this is entirely relevant, however I noticed this forum post regarding fullscreen mode on iphone devices. It's in the interactive-video activity, but may help find a sensible work-around, here's the post: https://h5p.org/node/8295

I also have issues with the full-screen button not displaying in iframes and mobile devices.

When using iframes, depending on the mobile device web-browser, sometimes the full screen button shows, sometimes not. Usually the fullscreen button  displays when using a desktop web browser.

I will be recommending to my users to use particular web browsers - I notice that Chrome browser (at least on android mobiles) does show the fullscreen button when using iframes, so this is the browser I would recommend to my users. I would then like to add a button on the first screen of a 'course presentation' activity. If I can link to whatever triggers the fullscreen mode using a button or link within the presentation this would solve my issue using fullscreen on mobiles.

Here's a previous post made regarding this: https://h5p.org/node/8403  this post also covers a fontaware issue in the libraries.

I hope someone (possibly falcon) can suggest some solutions/recommendations :-D


falcon's picture

Hi, not all browsers supports fullscreen from iframes, for those that doesn't the fullscreen button won't show. We think that is better than showing a fullscreen button that doesn't work or will make other things on the page stop working. I might be that some browsers have fixed these issues but not all will have updated their browsers. We will take another look in a while and see if the button can be enabled for more browsers when H5Ps are embedded in iframes. Will answer your other entry when I get to it.