Toggle Fullscreen Mode Using the JavaScript Fullscreen API

You may also like...

10 Comments

  1. Bryan Paulo Altezo says:

    how can i detect when the user exits fullscreen? for Chrome?

    • Hendy Tarnando says:

      You may want to check out the fullscreenchange event. Inside that event handler, check for document.fullscreenElement, it returns null if the browser is switched out-of fullscreen mode. Note that the API is still vendor-prefixed in Chrome (webkitfullscreenchange and webkitFullscreenElement).

  2. Carlos G says:

    Sadly it won't stay in fullscreen if user press F5 or Ctrl+F5... did you find a way?

    • Hendy Tarnando says:

      To achieve this, you can attach keydown event when entering fullscreen mode:

      document.addEventListener('keydown', disableF5);

      Then remove the event listener when exiting fullscreen mode:

      document.removeEventListener('keydown', disableF5);

      Inside the event handler, call event.preventDefault() if the pressed key is F5:

      function disableF5(e) {
        if (('key' in e && e.key === 'F5') || (e.keyCode || e.which) === 116) {
          e.preventDefault();
        }
      }
  3. Pepa says:

    Thank you, works well.

  4. Ismail khan says:

    Thank you very much for the coding

  5. JohnMiller says:

    Excellent! Quite the clearest and fullest treatment of the use of the HTML5 Fullscreen API that I've come across. Superbly helpful examples! Thanks for sharing!

Leave a Comment

Wrap your code block in [code] and [/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.