fullscreen error

Current Behavior

In chrome dev tools - mobile emulation I get

caught (in promise) TypeError: fullscreen error

Environment

• URL attempting to play: www.greatstate.co
• Browser: Chrome
• Operating system:

Other Information

“gatsby”: “2.7.5”, “react-player”: “^1.14.2”,

My player code looks like

     <ReactPlayer
        ref={videoRef}
        className={css.reactPlayer}
        url={url}
        width="100%"
        height="100%"
        muted
        playing
        loop
        controls={false}
        onDuration={duration => {
          handleDuration(duration)
        }}
        onReady={() => {
          setVideoIsReady(true)
        }}
      />

I have trieda few vimeo config options

vimeoConfig={{ iframeParams: { fullscreen: 0 } }}

and

vimeoConfig={{ playerOptions: { fullscreen: 0 } }}

[maddyahmad]

Thanks, that worked for me. Even though I have to add vimeo in configuration. Now my react player looks like :

<ReactPlayer
className="react-player"
style={{ pointerEvents: "none" }}
url={roundThreeVideo}
pip={true}
stopOnUnmount={false}
onEnded={() => roundThreeQuiz()}
playing
config={{
vimeo: {
playerOptions: {
playsinline: true,
},
},
}}
/>

[Franofarion]

@maddyahmad I don’t know if it’ll help you this may fix it

playerOptions: {
  playsinline: true
}

According to the Vimeo API documentation on playsinline attribute :

Whether the video plays inline on supported mobile devices. To force the device to play the video in fullscreen mode instead, set this value to false.

Therefore I forced it to true, and it fixed it.

It also fixed an other issue I had, on mobile emulation on chrome, while I push pause / play button, it triggered the fullscreen mode.

my code :

<ReactPlayer
    url={videoUrl}
    controls={true}
    width='100%'
    height='100%'
    className={classes.videoPlayer}
    playing
    config={{
      playerOptions: {
        playsinline: true
      }
    }}
/>