CODEWITHSUNDEEP
javascriptreactjs
dev
dev

Reputation: 926

Onclick opens video in fullscreen

I am trying to make the video element when it clicked will be opened in full screen mode. As there is no way to do this directly with video tag, using Full Screen Api

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

But i am unaware how to do this in react, as its mentioned that instead of document.getElementById, we should use useRef.

Here is my below snippet, how to achieve this.

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const vidRef = useRef(null);

  return (
    <video width="350" height="200" controls ref={vidRef}>
      <source
        src={"http://media.w3.org/2010/05/sintel/trailer.ogv"}
        type="video/mp4"
      />
    </video>
  );
}

So that when the user clicks on it should open in full screen.

Upvotes: 1

Views: 1172

Answers (2)

devrnd
devrnd

Reputation: 167

you almost found the solution yourself:

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const vidRef = useRef(null);

  const handlePlay = () => {
      const elem = vidRef.current
      if(elem){ //checking if ref was initiated
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
          elem.msRequestFullscreen();
        }
      }
  }

  return (
    <video width="350" height="200" controls ref={vidRef}>
      <source
        src={"http://media.w3.org/2010/05/sintel/trailer.ogv"}
        type="video/mp4"
        onPlay={handlePlay}
      />
    </video>
  );
}

Upvotes: 3

David
David

Reputation: 200

Not tested but i think this will work:

import { useRef } from "react";
import "./styles.css";

export default function App() {
        
const vidRef = useRef(null);

const requestFullScreen = (elem) =>{
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}
}
const openFullScreen = ()=>{
    requestFullScreen(vidRef.current)
}
return (
    <video width="350" height="200" controls ref={vidRef} onClick={openFullScreen}>
          <source
            src={"http://media.w3.org/2010/05/sintel/trailer.ogv"}
            type="video/mp4"
          />
        </video>
      );
}

Upvotes: 0

Related Questions