Toggle Fullscreen Mode With Javascript (Very Simple Examples)

Welcome to a quick tutorial and examples of how to toggle fullscreen mode with Javascript. Yes, the old grandmother’s age of the Internet is over now. Modern web browsers can be switched to full-screen mode in Javascript easily.

Yep, that’s all the basics. But read on if you need an actual example!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• The Fullscreen API is known to not work on iPhone Safari at the time of writing. Do your own detection and fallback.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

FULLSCREEN DEMO

 

 

PART 1) TOGGLE FULLSCREEN MODE

<!-- (A) IMAGE FOR TESTING FULLSCREEN -->
<img id="demo" src="chick.jpg">
 
<!-- (B) FULLSCREEN BUTTONS -->
<div>
  <!-- (B1) ENTIRE PAGE -->
  <input type="button" value="Entire Page"
         onclick="document.documentElement.requestFullscreen()">
 
  <!-- (B2) IMAGE ONLY -->
  <input type="button" value="Image Only"
         onclick="document.getElementById('demo').requestFullscreen()">
 
  <!-- (B3) EXIT FULLSCREEN -->
  <input type="button" value="Exit"
         onclick="document.exitFullscreen();">
</div>

Yep, this is as advertised in the introduction snippet.

• Use requestFullscreen() to enter the fullscreen mode
• Use exitFullscreen() to exit full screen.

It’s really that simple.

• document.documentElement refers to the entire HTML document. So document.documentElement.requestFullscreen() will set the entire page into fullscreen mode.
• document.getElementById(TARGET).requestFullscreen() is self-explanatory… We only set that particular section of the page into fullscreen mode.

 

 

PART 2) DETECTING FULLSCREEN CHANGE

 <!-- (A) FULLSCREEN BUTTONS -->
<input type="button" value="Fullscreen"
       onclick="document.documentElement.requestFullscreen()">
<input type="button" value="Exit"
       onclick="document.exitFullscreen();">
 
 <!-- (B) JAVASCRIPT -->
<script>
// (B) LISTEN TO FULLSCREEN TOGGLE
document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement===null) {
    console.log("Exited fullscreen");
  } else {
    console.log("Entered fullscreen");
  }
});
 
// (C) ON FULLSCREEN ERROR
document.addEventListener("fullscreenerror", evt => console.error(evt));
</script>

For you guys who want more controls, to do some things when the user toggles fullscreen:

• The fullscreenchange event is triggered whenever fullscreen mode is toggled.
• document.fullscreenElement contains the current fullscreen element. If this is null, the user is not in fullscreen mode.
• The fullscreenerror event is triggered when the user has trouble entering fullscreen mode.

 

 

EXTRA) FULLSCREEN ONLY CSS

#demo:fullscreen { background: white }

For those who are interested, notice that single line of CSS. Yep, we can use :fullscreen to apply styles on elements only when they are in fullscreen mode.

 

 

COMPATIBILITY CHECKS

• Fullscreen API – CanIUse
• Arrow Functions – CanIUse

I will recommend doing feature detection and using a Polyfill – Check out Modernizr.

 

LINKS & REFERENCES

• Fullscreen API – MDN
• Enhance fullscreen on mobile devices, lock screen orientation – Code Boxx

 

INFOGRAPHIC CHEAT SHEET