Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

Question

I have a problem for a fullscreen mode in a webapp on iOS mobile device (iPhone and IPad, all versions).

I have a button which call a toggle fullscreen function. This function work on all devices other than iOS.

My function :

    function toggleFullScreen(e) {
                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                    $('body').css({'height': screen.height});
                    fullSreen = true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }else if(document.cancelFullScreen){
                        document.cancelFullScreen();
                    }
                    $('body').css({'height': 'auto'});
                    fullSreen = false;
                }
    }

It does not work on Safari, Chrome and Firefox on iOS mobile/iPad, but the function is call (i try it with some alert message). I do not understand why, thx in advance !

https://stackoverflow.com/a/65516223/372347 shows that arbitrary html elements can't currently go fullscreen. Unless the element is a video it won't work on ios. — Todd, Aug 07 '21 at 13:55

score 2 · Answer 1 · answered Sep 04 '20 at 09:25

Please try the below code. It's working fine in my system in all browsers of the iPhone.

HTML

<div class="video-banner-div">  
    <video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
        <source src="url_of_your_video.mp4" type="video/mp4">
    </video>
</div>

JS

vid = $('.video-banner-div video').get(0); // get the element of video tag

$(".full-screen-icon").on("click", function () {
   // on click of the button call the toggle function
    toggleFullScreen();
});

function toggleFullScreen() {
    if (vid.requestFullScreen) {
        vid.requestFullScreen();
    } else if (vid.webkitRequestFullScreen) {
        vid.webkitRequestFullScreen();
    } else if (vid.mozRequestFullScreen) {
        vid.mozRequestFullScreen();
    } else if (vid.msRequestFullscreen) {
        vid.msRequestFullscreen();
    } else if (vid.webkitEnterFullscreen) {
       vid.webkitEnterFullscreen(); //for iphone this code worked
    }
}

score 0 · Answer 2 · answered Feb 08 '18 at 23:27

You can verify at http://caniuse.com/fullscreen that iOS Safari does not offer a API for fullscreen, check this asnwer for more information Full screen api HTML5 and Safari (iOS 6) . But html video elements can go fullscreen.

Take a look at https://brad.is/coding/BigScreen/ , is a good lib to handle fullscreen events.

Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

2 Answers2