how to open youtube on big screen when clicked played button in react js-CodePudding

I just started learning to react and now I'm in the problem I just want to open a youtube player in big screen when I click the play button and I don't know how to do it

import React, { useState, useEffect } from "react";
import { GetVideo } from "../../api";
import Youtube from "react-youtube";

const Media = ({ id, isMovie }) => {
  const [video, setVideo] = useState([]);

  useEffect(() => {
    const getVideoData = async () => {
      await GetVideo(isMovie, id).then((response) => {
        const trailer = response.data.results.find(
          (video) => video.name === "Official Trailer"
        );
        setVideo(trailer);

      });
    };
    getVideoData();
  }, [isMovie, id]);

  return (
    <div>
      <Youtube videoId={video.key} />
    </div>
  );
};

export default Media;

CodePudding user response：

You can pass an opts object, which accepts height and width as properties. I'd also look for a fullscreen flag (or send a pull request)

Edit: for full screen, I think it's opts.playerVars.playsinline (docs)

CodePudding user response：

Try passing playsinline property inside the opts object.

The playsinline parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Setting the value to 1 causes inline playback.

Also, you can set custom width and height by passing these properties inside the opts.