Repository navigation
iOS Fullscreen not working #493
Description
Activity
@terrill I've encountered the same issue on a desktop browser and have a potential fix
Issue:
When domain A includes an iframe on domain B containing media without setting
iframe/@allowfullscreen = true, the Able Player fullscreen button will fail to open the media in true fullscreen mode. This is the correct behavior because the iframe is on a different domain, and the expected fallback for Able Player is a modal. That modal opens without a title (#modalTitle-____) or close button (.modalCloseButton) and cannot be removed from view, as seen in the iOS video reported initially and the screenshot below:
- affects Able Player v4.5.0
- tested in Chrome 116 and Firefox 112 on Windows 10
This is a special case and it's worth noting:
- setting
iframe/@allowfullscreen = trueavoids the issue altogether and is the best solution overall as it safely produces the expected fullscreen behavior instead of the fallback modal - if the iframe is on the same domain as the containing page, the requestFullscreen JavaScript method is not blocked by the browser's security and this issue does not arise
- when the issue arises, the only solution for a user is to reload the entire page or, if they're savvy, the iframe
- I know this is an old issue, and I can open a new one if that's preferred or they're truly not related
Partial solution:
- control.js Line 1488 - setFullscreen function handles the request for fullscreen
- Line 1538 - begins
Non-native fullscreen support through modal dialog - Line 1549 - calls AccessibleDialog
- value for parameter
fullscreenis true. Changing to false partially fixes modal and seems the appropriate value - This change enables the modal's title and close button, allowing the modal to be closed. The "Enter full screen" button on the player's controls doesn't change to "Exit full screen" (see screenshot below)
@terrill for the first solution. Where in the code are you setting iframe/@allowfullscreen= true?
@bvillegas-od To set
iframe/@allowfullscreen = trueI manipulated the output using the browser's Developer Tools during my analysis of the issue. This was not performed in code, but only provided to detail the issue's causeThe code change I made in my copy of Able Player is described in the Partial solution section above, and I hacked the
falseinto build/ableplayer.min.js. That hack improved the experience for our users, but it is incomplete for the reason given in Point 5. It may have additional consequences I'm not aware of, which is one reason I didn't make a pull request- added a commit that references this issue
on Dec 31, 2025 I spent some time with the fullscreen modal used to polyfill iOS fullscreen, and yeah...seems like that hasn't worked for some time. I wasn't able to get it working much better (a bit, but not good enough to be worthwhile.)
I've instead removed the fake fullscreen mode and disabled the fullscreen toggle if the current browser doesn't support native fullscreen. iOS 18+ allows native fullscreen mode to be enabled behind a feature flag, so maybe this will be supported at some point.
The iframe question raised by @boondaburra is a separate issue; it isn't related to the iOS issue at all, and I'll open taht as a separate issue.
Because iOS does not offer support for the fullscreen API the video’s are played inside a modal but this can NOT be closed.
ableplayer/scripts/browser.js
Lines 154 to 160 in 803bc53
https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled
On iOS the fullscreen modal can not be close, there is no close button and clicking outside does not close the modal.
screencast.2021-12-20.18-03-01.mp4