How to disable youtube cards,title and other controls in React Player

I'm using ReactPlayer module and I want to disable the cards,title, autoplay etc. Does anyone know how to fix this?

 <ReactPlayer 
                    url={`https://www.youtube.com/watch?v=${mainTrailerShowcase.key}`}
                    playing={true}
                    controls ={false} />

 <ReactPlayer 
                    url={`https://www.youtube.com/watch?v=${mainTrailerShowcase.key}`}
                    playing={true}
                    controls ={false} />

official documentation doesn't show any https://www.npmjs.com/package/react-player here is my codepen of the react code https://codepen.io/avinash-tallapaneni/pen/VwEGMoK?editors=1010

npm

react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion. Latest version: 2.12.0, last published: 3 months ago. Start using react-player in your project by running npm i react-player. There are 954 other projects in the npm registry using react-player.

Avinash-Tallapaneni

CodePen

VwEGMoK

...

1 Reply

AvinashOP•2y ago

i tried this stilll didnt work

<ReactPlayer
  className="trailer-player flex items-center justify-end"
  style={{ width: '100vw' }}
  url={`https://www.youtube.com/watch?v=${mainTrailerShowcase.key}`}
  playing={true}
  controls={false}
  config={{
    youtube: {
      playerVars: {
        modestbranding: 1, 
        rel: 0, 
        showinfo: 0, 
        iv_load_policy: 3, 
      },
    },
  }}
/>

<ReactPlayer
  className="trailer-player flex items-center justify-end"
  style={{ width: '100vw' }}
  url={`https://www.youtube.com/watch?v=${mainTrailerShowcase.key}`}
  playing={true}
  controls={false}
  config={{
    youtube: {
      playerVars: {
        modestbranding: 1, 
        rel: 0, 
        showinfo: 0, 
        iv_load_policy: 3, 
      },
    },
  }}
/>

Gaming

Programming

How to disable youtube cards,title and other controls in React Player