React-player: pip prop is not working

[Dejan87]

When I pass pip props to ReactPlayer and set it's value to false ( default value ), it won't hide the picure-in-picture option from video...

[cookpete]

Are you doing anything differently to the demo app? That seems to work when setting pip back to false.

[Dejan87]

I'm just doing the following:
ReactPlayer pip - because the default value is false,
Also tried to use it this way - ReactPlayer pip={false} and in both cases picture-in-picture option still renders on the video.

For example, adding or removing "controls" prop will add/remove controls from the video, and I tried the same thing with "pip" prop.

Am I doing something wrong?

[cookpete]

Sorry.. I completely misunderstood your problem.

There is a SO post here that has some useful information.

There is a new [disablePictureInPicture](https://wicg.github.io/picture-in-picture/#disable-pip) attribute being added to <video> that does what you want. You can set this using config.file.attributes:

<ReactPlayer
  controls
  playing
  url='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
  config={{ file: { attributes: { disablepictureinpicture: 'true' }}}}
/>

https://jsfiddle.net/86ewraov/

Note that disablepictureinpicture is all in lowercase and set to the string 'true' to tell React to pass it on to the DOM element.

I'm not sure what browsers support this, but latest Chrome seems to work correctly.

[Dejan87]

I've found those information, but wasn't sure how to tell React to pass it on to the DOM ( wasn't aware that option is available on config.file.attributes ).

Thank you for the response and for the solution.

[paulincai]

Funny though, you cannot pass a false or 'false' to it so you cannot programatically turn it on for some and off for others unless you make the entire config into a variable.

[jeannegarciano]

Hi @CookPete This seems to work in chrome but not in Firefox. I tried putting this line of code:
config={{ file: { attributes: { disablepictureinpicture: 'true' }}}} but I can still see picture-in-picture mode. Any work around for this? Will try to check it in Safari.

[cookpete]

This is probably because Firefox doesn't support disablePictureInPicture yet. Note the partial support in https://caniuse.com/#feat=picture-in-picture

This thread about it only mentions Chrome and Safari supporting it: https://github.com/facebook/react/issues/15333#issuecomment-480687521

[jeannegarciano]

Okay, Thank you @CookPete for the quick response