CODEWITHSUNDEEP
reactjs
shubham tarpara
shubham tarpara

Reputation: 25

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

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;

Upvotes: 0

Views: 795

Answers (2)

Ritik Banger
Ritik Banger

Reputation: 2748

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.

Upvotes: 2

Silviu Burcea
Silviu Burcea

Reputation: 5348

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)

Upvotes: 2

Related Questions