JavaScript Fullscreen API

Among web applications one the basic features you might need is a fullscreen mode.

It's surprisingly simple how to achieve it using pure and simple JavaScript.

The JavaScript

To turn on the fullscreen mode you can call this function using an event handler or any other method of your choice.

This will turn it on for the whole document:

In the other hand, if you want to turn off the fullscreen mode call this function:


I had a blackground-color on my body element but when I turned on the Fullscreen it was showing just a rectangle with that color.

You can specify styles for the fullscreen window mode. In my case I needed to specify the background-color again:

View Demo

More on the fullscreen API on the MDN site.

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.