JS フルスクリーンの開始、解除

ページでブラウザのフルスクリーンモードを実装し、解除するサンプルです。

動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。

ボタンを押して、フルスクリーンへ変更、さらに閉じるボタンで解除のサンプルはありますが、現在のフルスクリーンの状態を検知して、閉じるボタンを出すシンプルなコードが見つからなかったので、ここに書いておきます。

以下の例では、全画面と解除がトグルで表示されます。

HTML


<div id="demo_stage"></div>

   window.addEventListener('load', function(){
        openFS();
    });

    document.addEventListener('fullscreenchange', (event) => {
        if (document.fullscreenElement) {
            exitFS ();
        }else{
            openFS();
        }
    });

    function openFS(){
        document.getElementById('demo_stage').innerHTML='<div id="demo_fs_req" class="demo_btn">フルスクリーン<br>スタート</div>';
        // フルスクリーン表示
        document.getElementById('demo_fs_req').addEventListener('click', function(){
            document.body.requestFullscreen();
        });
    }
    function exitFS(){
        document.getElementById('demo_stage').innerHTML='<div id="demo_fs_exit" class="demo_btn">フルスクリーン<br>解除2</div>';
        // フルスクリーン解除
        document.getElementById('demo_fs_exit').addEventListener('click', function(){
            document.exitFullscreen();
        });
    }

CSS

    .demo_btn{
        border-radius: 5px;
        background-color: #36F;
        color: #FFF;
        width: 140px;
        padding:10px;
        text-align: center;
        margin: 10px auto 0;
    }
    .demo_btn:hover{
        opacity: 0.9;
        cursor: pointer;
    }
    #demo_fs_exit.demo_btn{
        background-color: #F36;
    }

    #demo_stage{
        background-color: #FFF;
        width: auto;
        margin: 40px 0 20px;
        padding: 40px 0 40px;
    }

    #demo_screen{
        background-color: #000;
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    #demo_screen div{
        background-color: #FFF;
        height: 140px;
        max-width: 90%;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        line-height: 140px;
        text-align: center;
        font-size: 21px;
    }