10

I want to disable Picture in Picture feature for <Video> tag for my website due to some certification requirements but firefox does not allow to turn off. Any help would be appreciated.

  • Firefox uses a shadow-root with {mode:"closed"} to forcefully display Picture in Picture toogle (See the image).
  • Firefox also not supporting Picture-in-Picture API - check this link

Note: I have also added disablePictureInPicture attribute but still it's not working for firefox.

 <video width="400" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls  disablePictureInPicture></video>
Rohit Patel
  • 201
  • 3
  • 8

4 Answers4

5

As far as I know, there is currently (as of Firefox 72) no option for website authors to disable the button. Only users can hide it via the Firefox settings.

Though a request to add an API was created just a few hours ago.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
3

Videos without audio do not have the picture in picture button in firefox. This will not work for all use cases, but it might be useful in some situations. If you really depend on it and having audio you could try using a separate audio tag, but that could result in desynchronization issues.

You can do this e.g. using ffmpeg like described in this question.

zuim
  • 1,039
  • 8
  • 10
  • Great solution when using videos as background – Amin Jan 25 '21 at 18:06
  • I have a background MP4 with no audio and the PIP ui still displays (FF 96.0b9). Has this behavior changed or could there be something wrong with the way the video is formatted? – k3davis Dec 28 '21 at 12:26
  • This still works on my website. Make sure there is no audio stream in the video. An audio stream with no volume/no sound will not work. You can use the `ffmpeg -i inputfile -c copy -an outputfile` command from the linked question to achieve this. Note that the button is also hidden, when directly opening the video url in firefox without any html. So this does not depend on the HTML tag. – zuim Dec 30 '21 at 04:29
1

I have found one solution for this Bug 1610522 - Ability for developers to hide/disable picture-in-picture button.

If you put video in Iframe <iframe> picture in picture feature. is not showing.

<div class="video-foreground">
          <iframe frameborder="0" width="350" height="250" allowfullscreen srcdoc="<html><head><style>body{margin: 0;padding: 0;}.bg-video-wrap {position: relative;overflow: hidden;width: 100%;height: 100vh;display: flex;}video {object-fit: cover;min-width: 100%;min-height: 100vh;z-index: 1;}</style></head><body><div class='bg-video-wrap'><video loop muted autoplay><source src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' type='video/mp4'></video></div></body></html>" >
             
          </iframe>
        </div>

here is the example

Bibin R
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 17 '21 at 21:44
  • This answer is clear, not confirmed if working – Alex Dec 15 '22 at 10:39
0
document.head.innerHTML += ` <style>
.pip-expanded, .pip-small, .pip-icon, .pip-explainer {
    position: absolute;
    left: 0;
    top: 0;
    display :block;
}</style>`
Wahib Mzali
  • 120
  • 5