0

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

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
/>
Joseph
  • 7,042
  • 23
  • 83
  • 181

1 Answers1

0

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>
);
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • Hello there again. I've applied it in here https://codesandbox.io/s/video-player-with-slider-forked-comoz. On the first slider, it doesn't appear but on second one, it appears – Joseph Mar 31 '21 at 03:49
  • It's an experimental feature. Updated answer to solve this one as well. – Ori Drori Mar 31 '21 at 04:02
  • Ok. Thank you Ori – Joseph Mar 31 '21 at 04:08
  • Hi again. I see errors in console for this. `Invalid DOM property disablepictureinpicture. Did you mean disablePictureInPicture` – Joseph Mar 31 '21 at 04:47
  • I've changed the config to remove the warnings. See updated answer. You were right about the camel case. Also `true` should be a boolean, and not a string in this case. – Ori Drori Mar 31 '21 at 04:53
  • 1
    Welcome again. That was educational for me as well :) – Ori Drori Mar 31 '21 at 05:01