How to exit fullscreen onclick using Javascript?

Question

Not sure if the following code snip will work embedded on SO, as it didn\'t work when pasting it, however it does work stand-alone.

The problem, is I want this to be a t

Answer 1

As of January 2020, in a slightly different scenario where I wanted to toggle fullscreen mode on a video tag, the accepted solution did not work for me on Safari & iOS Safari. On these platforms, the working APIs are webkitEnterFullScreen and webkitExitFullscreen and both should be called on the HTML Element. Therefore in my case the complete code with platform-specific fallbacks was :

// Request full screen
const requestVideoFullScreen = videoElt.requestFullscreen || videoElt.webkitEnterFullScreen || videoElt.mozRequestFullScreen || videoElt.msRequestFullScreen;
if (requestVideoFullScreen) {
    requestVideoFullScreen.call(videoElt);
}
...
// Exit full screen
if (videoElt.webkitExitFullscreen) {
    videoElt.webkitExitFullscreen();
} else {
    const cancelVideoFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
    if (cancelVideoFullScreen) {
        cancelVideoFullScreen.call(document);
    }
}

Moreover, to use the fullscreen-related events I had to listen to the "webkitbeginfullscreen" and "webkitendfullscreen" events on iOS Safari, and "webkitfullscreenchange" on macOS Safari, as mentioned in this other SO answer.