reactjsreact-player

In react-player, how can I disable the FullScreen button?


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>

Solution

  • 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 :)