Click/tap fullscreen html5 video to exit fullscreen

Question

Goal

I have a video setup that plays fullscreen when a link on the page is tapped on a mobile device. This works fine.
I have hidden the HTML5 video controls via CSS - I want the video to be completely clean without any controls.
I want to be able to close the fullscreen video by tapping again the fullscreen video itself.
I also need to be able to add a class to the body and pause the video on close. The reason for adding the class is that I want to show and hide the video itself, so adding the class lets me control the css for the whole page as a state change.

Problem

When I hit esc for example, or Back on an Android mobile it obviously won't run the function.

How can I detect when fullscreen has been exited to run whatever functions I want?

Code

videoSmallTrigger.on('click', function() {

    // Activate
    if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {

        console.log('trigger open');
        launchFullscreen(videoSmallID);
        body.addClass('fullscreen-video-sm');
        videoSmall.get(0).play();

    }
    // Deactivate
    else {

        console.log('trigger close');
        exitFullscreen();
        body.removeClass('fullscreen-video-sm');
        videoSmall.get(0).pause();

    }

});

function launchFullscreen(element) {
   
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }

}

function exitFullscreen() {

  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }

}

score 1 · Accepted Answer · answered Jan 01 '22 at 21:23

Solved it using a combination of this post and some of the comments beneath it:

How to detect when a page exits fullscreen?

if (document.addEventListener) {
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler() {
    if (!document.isFullScreen && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {

        // Code to run when you exit fullscreen by hitting the ESC key etc.

        body.removeClass('fullscreen-video-sm');
        videoSmall.get(0).pause();
    }
}

Click/tap fullscreen html5 video to exit fullscreen

Goal

Problem

Code

1 Answers1