Как воспроизвести HTML5 видео в полноэкранном режиме по нажатию кнопки в реакции js

Question

Я пытаюсь показать видео в полноэкранном режиме по нажатию внешней кнопки. Я пытался с ref и document.getElementByid (). Он выдавал ошибку для requestFullscreen (). Есть ли другой способ добиться этого.

  const fullScreenVideoRef=useRef(null);
  const  onShowVideo=()=>{
  if (fullScreenVideoRef.current.requestFullscreen) {
            marioVideo.current.requestFullscreen();
        }
        else if (fullScreenVideoRef.current.msRequestFullscreen) {
            marioVideo.msRequestFullscreen();
        }
        else if (fullScreenVideoRef.current.mozRequestFullScreen) {
            marioVideo.current.mozRequestFullScreen();
        }
        else if (fullScreenVideoRef.current.webkitRequestFullScreen) {
            marioVideo.current.webkitRequestFullScreen();
        }
   }

  <video muted autoPlay loop controls id="full-screenVideo" ref={fullScreenVideoRef} >
                        <source src="/video/web-experience-cdn.mp4" type="video/mp4"/>
  </video>

Answer 1

Используйте вот так:

toggleFullScreen = () => {
    var el = document.getElementById("full-screenVideo");
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    }
  };

...

<video muted autoPlay loop controls id="full-screenVideo" ref={fullScreenVideoRef} >
                    <source src="/video/web-experience-cdn.mp4" type="video/mp4"/>
</video>

Образец: ЗДЕСЬ

Код образца: ЗДЕСЬ