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.

  • To enter fullscreen mode for the entire page  – document.documentElement.requestFullscreen()
  • To enter fullscreen mode for a specific element – document.getElementById("ID").requestFullscreen()
  • Lastly, use document.exitFullscreen() to exit fullscreen.

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

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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

 

JAVASCRIPT FULLSCREEN MODE

All right, let us now get into the example of toggling fullscreen mode in Javascript.

 

PART 1) TOGGLE FULLSCREEN MODE

1-fullscreen.html
<!-- (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

2-events.html
 <!-- (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

1-fullscreen.html
#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.

 

EXTRA BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

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

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Toggle Fullscreen In Javascript (Click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Toggle Fullscreen Mode With Javascript (Very Simple Examples)”

  1. I implemented full screen mode based on the examples above. However, if I move to another page on the website, the fullscreen mode is disabled.

    How can I permanently enable it regardless of what page I got to on a website? Just like the native full screen CMD+CTRL+F or F11 in Windows. It’s always full screen regardless of the page in the website I visit.

Leave a Comment

Your email address will not be published. Required fields are marked *