Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

web development
web
api
communitycreator

What is the Fullscreen API?

Chidume Nnamdi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Web APIs: Fullscreen API

The Fullscreen API adds methods to present a specific element (and its descendants) in full-screen mode and to exit.

This API enables full-screen mode in web apps and lets you select the element you want to view in full-screen mode.

In Android phones, it removes the browser’s window and the Android top status bar (where the network status, battery status, etc. are displayed).

Methods

requestFullscreen: displays the selected element in full-screen mode on the system, shutting off other apps, the browser, and system UI elements.

exitFullscreen: exits full-screen mode to normal mode.

Let’s see a simple example where we can use full-screen mode to watch a video:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
        <div class="web-api-card-head">
            Demo - Fullscreen
        </div>
        <div class="web-api-card-body">
        <div id="error" class="close"></div>
        <div>
        </div>
        <div class="video-stage">
            <video id="video" src="./video.mp4"></video>
            <button onclick="toggle()">Toogle Fullscreen</button>
        </div>
        <div>
        </div>
        </div>
        </div>
    </div>
</body>

This API makes the full-screen mode of our webpage possible. It lets you select the element you want to view in full-screen mode, then shuts off the browser’s window features (i.e., URL bar, the windowpane) and presents the element to take the entire width and height of the system.

In Android phones, it will remove the browsers window and the Android UI where the network status and battery status are displayed, and display the Element in the full width of the Android system.

<script>
    const l =console.log

function toggle() {
    const videoStageEl = document.querySelector(".video-stage")
    if(videoStageEl.requestFullscreen) {
        if(!document.fullscreenElement){
            videoStageEl.requestFullscreen()
        }
        else {
            document.exitFullscreen()
        }
    } else {
        error.innerHTML = "Fullscreen API not supported in this device."
        error.classList.remove("close")        
    }
}
</script>

See that the video element is in the div#video-stage element with a Toggle Fullscreen button.

We want to make the element div#video-stage go full-screen when we click on the Toggle Fullscreen button.

See the function toggle:

function toggle() {
    const videoStageEl = document.querySelector(".video-stage")
    if(!document.fullscreenElement)
       videoStageEl.requestFullscreen()
    else
       document.exitFullscreen()
}

It queries the div#video-stage element and holds its HTMLDivElement instance on videoStageEl.

We use the document.fullsreenElement property to find out whether the document is not in full-screen, so we can call requestFullscreen() on videoStageEl. This will make the div#video-stage take over the entire device view.

If we click on the Toggle Fullscreen button on the fullscreen mode, the exitFullcreen is called on the document and the UI view is returned to the normal view.

Try it here.

RELATED TAGS

web development
web
api
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring