CSS가 아닌 HTML DOM(Document Object Model)의 기능으로 풀스크린 제어를 할 수 있다

별로 어려운 기능은 아니지만 내가 몰랐었다...

풀스크린 적용

<div id='video-container'>
  <video src='url-lalalalala' controls='true'/>
</div>

위는 간단한 비디오가 나오는 HTML 문서이다

여기서 자바스크립트의 requestFullScreen()을 이용하면

const videoContainer = document.querySelector('#video-container');

videoContainer.requestFullScreen();

이러면 풀스크린이 된다

주의❗️ 비디오에 직접 쓰지말고 out Tag에 적용하자

풀스크린 해제

반대로 자바스크립트의 exitFullScreen() 를 사용하면 된다

document.requestFullScreen();

주의❗️ 풀스크린을 적용한 태그가 아닌 document 객체의 메서드로 불러야 한다