How to enable fullscreen mode in a webpage?

Share

To enable fullscreen in the webpage you have to use Fullscreen API, which is one of the Browser APIs. Browser APIs (or web APIs) are the APIs that come built-in with the browsers. They allow developers to perform complex operations without dealing with lower-level code. 

Scenarios something like browsing product images on your e-commerce platform, where the user focuses on a product image. Going fullscreen with the product image is one of the best solutions to eliminate distractions, and what the Fullscreen API does is just that.

You should know just these two methods in order to integrate Fullscreen API on your webpage.

Element.requestFullScreen()

It first asks the browser to frame the specified DOM element with all its children into full-screen. while the rest of all elements are to be removed from the screen. it returns a Promise which resolves once the full-screen mode is fully enabled.

document.exitFullScreen()

What it does is simple, just exit the full-screen mode and come back to the original UI mode. it also returns Promise.

Example:

async function FullScreenOn() {
  document.getElementById("fullscreenElement")
    .requestFullscreen()
    .then((response) => {
       console.log("full screen on");
    })
    .catch((error) => {
       console.log("Error: ", error);
    });
}

async function FullScreenOff() {
  document.exitFullscreen()
    .then((response) => {
       console.log("full screen off");
    })
    .catch((error) => {
       console.log("Error: ", error);
    });
}

Find out more JS articles.

Share
Sudeep Mishra

Sudeep Mishra

Healing

Leave a Reply

Your email address will not be published.

%d bloggers like this: