特定要素を全画面表示したり解除するには
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>
指定エレメントのみの全画面表示の例
指定のエレメントのみ全画面表示させることもできます。
また、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>