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();
    }
  }
}

---