CODEWITHSUNDEEP
javascriptprogressive-web-apps
twharmon
twharmon

Reputation: 4282

How to programmatically switch display from standalone to fullscreen in PWA

My PWA works as expected when I set the "display" of my manifest to "fullscreen" or "standalone". But, I want my users to be able to toggle back and forth in settings. Is there a way to switch this programmatically in JavaScript?

Upvotes: 2

Views: 1219

Answers (2)

Hassan ALAMI
Hassan ALAMI

Reputation: 347

try this if you want to be sure that it will work in all browsers.

function getFullScreen() {
    if (document.body.requestFullscreen) {
        document.body.requestFullscreen();
    } else if (document.body.mozRequestFullScreen) { /* Firefox */
        document.body.mozRequestFullScreen();
    } else if (document.body.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        document.body.webkitRequestFullscreen();
    } else if (document.body.msRequestFullscreen) { /* IE/Edge */
        document.body.msRequestFullscreen();
    }
}

Upvotes: 2

Sully
Sully

Reputation: 14943

use document.body.requestFullscreen();

var videoElement = document.getElementById("videoElement");
videoElement.requestFullscreen();

Check https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

Upvotes: 0

Related Questions