1

This is my current code for rendering the react-player videos

<div className="player">
                    <ReactPlayer url={result.url}
                                 playing={false}
                                 width={275}
                                 height={150}
                                 onPlay={playVideo}
                                 onEnded={stopVideo}
                                 onPause={pauseVideo}
                                 controls={true}
                    />
                </div>
Nirmal Roy
  • 95
  • 1
  • 2
  • 7

2 Answers2

1
<ReactPlayer
      width={"100%"}
      height={"100%"}
      url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
      muted={true}
      playing={true}
      controls
      config={{
        file: {
          attributes: {
            controlsList: "nofullscreen",
          },
        },
      }}
    />
Omar Sherif
  • 11
  • 1
0

You can try to set the controls property to false, but it might hide some controls you didn't want to.

If your url is for example a Vimeo url, you can try to do something like this:

<ReactPlayer
   url='http://vimeo.com/...'
   vimeoConfig={{ iframeParams: { fullscreen: 0 } }}
/>

If it is a youtube url try this:

<ReactPlayer
    url='https://www.youtube.com/watch?v=mFJZ0HaYYB8'
    config={{
        youtube: {
             playerVars: { modestbranding: 1 }
        }
    }}
/>

Have a look on this page, it might help as well, or in the official component page under the Config prop section :)

Néstor Carreño Gimeno
  • 523
  • 2
  • 12
  • I tried setting controls to False, but now it is bringing a "Youtube" watermark, which can be clicked and a tab change occurs! – Nirmal Roy Oct 22 '19 at 08:50
  • But thanks a lot the official component page has exactly what I am looking for. It's the 'fs' tag – Nirmal Roy Oct 22 '19 at 08:58