특정div 또는 동영상 등을 전체화면으로 보이게 하기 fullsize, fullscreen

PC나 모바일에서 웹사이트를 열어볼 때 상단에 주소창이 보여지는 경우가 있습니다

브라우저의 설정에 따라 변경은 가능하겠지만, 개발자의 입장에서는 사용자의 브라우저 환경과 무관하게 무조건 전체화면으로 보여지게 하고 싶은 경우가 있습니다.

이때 사용할 수 있는 코드를 기록할까 합니다. 특정 DIV 또는 동영상 파일까지도 전체화면으로 보이도록 처리가 가능합니다.

<script>

var elem = document.getElementById("myvideo");

function openFullscreen() {

  if (elem.requestFullscreen) {

    elem.requestFullscreen();

  } else if (elem.mozRequestFullScreen) { /* Firefox */

    elem.mozRequestFullScreen();

  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */

    elem.webkitRequestFullscreen();

  } else if (elem.msRequestFullscreen) { /* IE/Edge */

    elem.msRequestFullscreen();

  }

}

</script>

위 코드가 동영상 플레이어를 전체화면으로 볼 수 있게 해주는 스크립트 코드입니다.

아래에 있는 버튼을 클릭하면 위 스크립트가 실행되어, id 가 myvideo 로 되어있는 video 태그를 전체화면으로 보여주게 됩니다 

<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>

<video width="100%" controls id="myvideo">

  <source src="rain.mp4" type="video/mp4">

  <source src="rain.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>

동영상 외에 일반 DIV 도 가능한지 확인해 봤는데, 정상적으로 동작을 합니다.

<div id = "myid"> 표시할 내용 </div> 

위와 같이 생성한 후에 myid 를 키값으로 하여 실행시키면 div 가 전체화면에 보여집니다.

참고로 배경색을 별도로 지정해 주지 않으면 기본적으로 검정색으로 표현되는 것을 확인했습니다.

아래 주소를 참고하였습니다.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen