Unable to enable Picture in Picture (PiP) mode for YouTube videos

[FindMalek]

Description:

I'm currently unable to enable Picture in Picture (PiP) mode for YouTube videos in my ReactPlayer component. I've set up the state for the ReactPlayer as follows:

const [state, setState] = useState({
  // ... your state configuration
  pip: true,
  // ... rest of your state configuration
});

And here's my ReactPlayer configuration:

<ReactPlayer
   {...state}
  onEnablePIP={() => console.log("onEnablePIP")}
  onDisablePIP={() => console.log("onDisablePIP")}
  // ... rest of your ReactPlayer configuration
/>

This is the button to activate the PIP

        <Button
          variant="ghost"
          size="icon"
          className="text-secondary-foreground"
          onClick={() => {
            if (ReactPlayer.canEnablePIP(state.url)) handlePip(state, setState)
          }}
        >
          <Icons.fullscreen className="size-5" />
        </Button>

I've tried using the YouTube URL 'https://www.youtube.com/watch?v=BBC2n_0y6cg', but the 'canEnablePIP' function always returns false, regardless of the URL.

Steps to Reproduce:

1. Set up the ReactPlayer component with the provided state configuration.
2. Use the YouTube URL 'https://www.youtube.com/watch?v=BBC2n_0y6cg' to test the PiP functionality.
3. Observe that the ReactPlayer.canEnablePIP() function always returns false.

Environment:

• URL attempting to play: 'https://www.youtube.com/watch?v=BBC2n_0y6cg'
• Browser: Brave
• Operating system: Windows 11
• React Player NPM Version: "^2.16.0"

Additional Information:

I've searched for similar issues on GitHub, but I couldn't find a solution that works for me. Any help or suggestions would be greatly appreciated.