How to hide only Picture in Picture (PiP) control from safari

Question

I need to hide only one video control from safari browser which is Picture in Picture (PiP). Is there is any solution for that ?

Can we hide this using HTML5?

Answer 1

disablePictureInPicture attribute can be used for that now

<video disablepictureinpicture controlslist="nodownload"></video>

details here: https://wicg.github.io/picture-in-picture/#disable-pip

Answer 2

There doesn't seem to be any official way to do it...

Currently in Safari it's all or nothing (with controls=false).

---

The shadow-targetting pseudo elements selectors doesn't seem to work on this browser, unlike on Blink browsers, and even though I found references of an ::-webkit-media-controls-picture-in-picture-button on the Internet.

---

So for today, the only solution is to disable all the default controls of your video element and to build you own controls.
If you wish, you can make it conditional though:

if(typeof vidElem.webkitSupportsPresentationMode === 'function' &&
  vidElem.webkitSupportsPresentationMode('picture-in-picture') ) {
    vidElem.controls = false;
    buildCustomControls(vidElem);
}

---

For the future, there might a controlsList attribute, which drafts specs currently only handles nodownload, nofullscreen and noremoteplayback, but I can't see why a nopicture-in-picture couldn't make its way there, if this attribute (mainly motivated by Blink browsers, once again) ever gets out of the drafts.