Fullscreen

JavaScript Fullscreen API examples

---

Enter fullscreen mode

Switch browser to fullscreen mode. Source

• Example:

  document.documentElement.requestFullscreen();

---

Exit from fullscreen mode

Exit from the fullscreen mode. Source

• Example:

  const exitBtn = document.getElementById('exit-btn');
  
  exitBtn.addEventListener('click', ()=>{
      if (document.fullscreenElement) {
          document.exitFullscreen();
      }
  });

---

Detect fullscreen mode

Detect if fullscreen mode is active. Source

• Example:

  window.addEventListener('resize', (evt) => {
      if (window.innerHeight == screen.height) {
          console.log('FULL SCREEN');
      } else {
          console.log('NORMAL SCREEN');
      }
  });

---

Toggle fullscreen mode

Toggle fullscreen mode. Source

• Example:

  const toggleBtn = document.getElementById('toggle-btn');
  
  toggleBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
    }
  }

---