fullscreen.html

<h1>fullscreenchange event example</h1>

<style>button{
    background-color: #141414;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}</style>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
  <button onclick="fullscreenImage()">Toggle Fullscreen image</button>
</div>

<img onclick="fullscreenImage()" id="fullscreen-image" src="https://images.unsplash.com/photo-1660487054778-6b0e7d4b5b4b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">

<script>

function fullscreenImage(){
    if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
    } else {
        document.getElementById("fullscreen-image").requestFullscreen();
    }
    
}


function fullscreenchanged (event) {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Leaving fullscreen mode.');
  }
}

document.addEventListener('fullscreenchange', fullscreenchanged);
// or
document.onfullscreenchange = fullscreenchanged;

// When the toggle button is clicked, enter/exit fullscreen
el = document.getElementById('toggle-fullscreen');
el.addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    el.requestFullscreen();
  }
});

</script>