How to play HTML5 Video in full screen on button click in react js

Question

I'm trying to show video in fullscreen on click of external button.I tried with ref and document.getElementByid() .It was throwing error for requestFullscreen().Is there any other way to achieve this.

  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

Use like this :

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>

Sample : HERE

Sample Code : HERE