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

shubham tarpara 0
Viewed 48

enter image description here

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;
reactjs
2 Answers

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)

Silviu Burcea0

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.

Ritik Banger0
Related