Go Fullscreen

<h1>Fullscreen Toggle</h1>
<button id="btn">Go Fullscreen</button>
<style>*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
h1{
    width: 95%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 9.5vmin;
    text-align: center;
}
#btn{
    padding: 20px;
    margin: 20px;
    background-color: #FE0067;
    border: none;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}
</style>
<script>
let myDocument = document.documentElement;
let btn = document.getElementById("btn");

btn.addEventListener("click", ()=>{
    if(btn.textContent == "Go Fullscreen"){
        if (myDocument.requestFullscreen) {
            myDocument.requestFullscreen();
        } 
        else if (myDocument.msRequestFullscreen) {
            myDocument.msRequestFullscreen();
        } 
        else if (myDocument.mozRequestFullScreen) {
            myDocument.mozRequestFullScreen();
        }
        else if(myDocument.webkitRequestFullscreen) {
            myDocument.webkitRequestFullscreen();
        }
        btn.textContent = "Exit Fullscreen";
    }
    else{
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if(document.msexitFullscreen) {
            document.msexitFullscreen();
        }
        else if(document.mozexitFullscreen) {
            document.mozexitFullscreen();
        }
        else if(document.webkitexitFullscreen) {
            document.webkitexitFullscreen();
        }

btn.textContent = "Go Fullscreen";
    }
});
</script>

demo

Code Preview

Popular Posts

Pages

Go Fullscreen