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>