1. fullscreen

브라우저를 fullscreen으로 만들고 그 안에 내용들을 적절히 css작업으로 작업.
버튼에 이벤트를 걸어서 작동하게 함.

// 풀스크린
if (document.documentElement.requestFullscreen)
  return document.documentElement.requestFullscreen();
if (document.documentElement.webkitRequestFullscreen)
  return document.documentElement.webkitRequestFullscreen();
if (document.documentElement.mozRequestFullScreen)
  return document.documentElement.mozRequestFullScreen();
if (document.documentElement.msRequestFullscreen)
  return document.documentElement.msRequestFullscreen();

// 풀스크린 취소
if (document.exitFullscreen) 
  return document.exitFullscreen();
if (document.webkitCancelFullscreen)
  return document.webkitCancelFullscreen();
if (document.mozCancelFullScreen) 
  return document.mozCancelFullScreen();
if (document.msExitFullscreen) 
  return document.msExitFullscreen();

2. IOS 관련

위 method들이 Ipad에서는 내장 플레이어로 변경되면서 전체화면으로 바뀌는 동작을 하는데 IPhone에서는 에러가 나서 다른 방법으로 fullscreen으로 만들어야 했다.
팀원의 도움으로 관련 내용들을 찾을 수 있었다.

// ReactPlayer component에 ref 사용
const ref = useRef();

if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
  const HTML5VideoElement = ref.current.getInternalPlayer();

  if (
    HTML5VideoElement.webkitSupportsPresentationMode &&
    typeof HTML5VideoElement.webkitSetPresentationMode === 'function'
  ) {
    HTML5VideoElement.webkitSetPresentationMode(
      HTML5VideoElement.webkitPresentationMode === 'fullscreen'
      ? 'inline'
      : 'fullscreen'
    );
  }
}