トップへ(mam-mam.net/)

Javascriptで指定要素を全画面表示させるソースコード

検索:

Javascriptで特定要素を全画面表示するには 要素.requestFullscreen(); メソッドを使用します。

全画面表示を解除するには document.exitFullscreen(); メソッドを使用します。

現在全画面で表示しているかどうかを確認するには document.fullscreenElement プロパティがnullかどうかで判断できます。

全画面表示の例

document全体を全画面表示することができます。

全画面表示と全画面終了

<a onclick="toggleFullScreen(document.documentElement);">全画面表示と全画面終了</a>
<script>
  function toggleFullScreen(obj){
    if(!document.fullscreenElement){
      obj.requestFullscreen();
    }else{
      document.exitFullscreen();
    }
  }
</script>

指定エレメントのみの全画面表示の例

指定の要素のみ全画面表示させることもできます。
以下ではDIV要素を全画面表示させています。 もし、videoタグを全画面表示すれば動画を全画面表示できます。

全画面表示と全画面終了

<div id="fullscreen_element" style="background:#fff;">
  <a class="bt102" onclick="toggleFullScreen(document.querySelector('#fullscreen_element'));">
    <span>全画面表示と全画面終了</span>
  </a>
</div>
<script>
  function toggleFullScreen(obj){
    if(!document.fullscreenElement){
      obj.requestFullscreen();
    }else{
      document.exitFullscreen();
    }
  }
</script>