Hide Something in Video in React

Question

I need to hide the icon encircled on the picture below? How can I hide it? I'm using react-player.

Pls check this codesandbox CLICK HERE

<ReactPlayer
      url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      playing={true}
      volume={1}
      width="100%"
      height="100%"
      controls
/>

Answer 1

The HTML5 <Video /> tag supports disabling this feature via the disablepictureinpicture attribute. This is still an experimental feature, and might not work in all browsers.

Pass the disablePictureInPicture html attribute via the ReactPlayer's config. If the Picture in Picture control doesn't disappear try setting controlsList: 'nodownload' as well.

const config = {
  attributes: {
    disablePictureInPicture: true,
    controlsList: 'nodownload'
  }
};

const App = () => (
  <div style={styles}>
    <ReactPlayer
      url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      playing={true}
      volume={1}
      width="100%"
      height="100%"
      config={config}
      controls
    />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
  </div>
);