CODEWITHSUNDEEP
htmlfirefoxhtml5-video
Nils
Nils

Reputation: 469

How to disable "picture in picture" on html5 video in firefox

The html element video has an attribute called disablePictureInPicture which works perfectly fine although it seems to only work in chrome.

Since I could only find old posts on this which didn't end up in a fix or workaround I'm asking here again.

Do you know a fix/workaround for this issue?

Upvotes: 9

Views: 7390

Answers (4)

VityaSchel
VityaSchel

Reputation: 738

I experimented with this, I don't support Mozilla decision to not follow spec and mark this as WONTFIX, but I found that for use cases when you have with no controls but want to keep context menu and remove picture-in-picture floating button, use pointer-events: all; CSS attribute or pointer-events: none; to remote both floating button and context menu.

Upvotes: 0

Golam Rabbi
Golam Rabbi

Reputation: 35

  1. Open Firefox go to this url about:config.
  2. You can see that says "This might void your warranty" Click on the "I accept the risk" button to proceed the step.
  3. Then in search bar, type media.videocontrols.picture-in-picture.enabled and Double-click on the entry to change the value. If it's already set to true, double-clicking will change it to false.

That's It.

Upvotes: 0

zuim
zuim

Reputation: 1129

Firefox 116+3, 4 or 118+5 added partial support with true value.

For Firefox 115 and older:

This was recently discussed on bugzilla with this result:

(at this time) we're not planning on implementing or shipping any part of the Picture-in-Picture Web API

But I found that some websites with videos in the background do not have the pip button. They do it by removing all audio streams from the video, which results in firefox not displaying the button. Obviously this will not work for all use cases, but it might be useful in some situations.

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

Upvotes: 4

asyncClipboard
asyncClipboard

Reputation: 31

It should works with 118+ disablePictureInPicture="true": https://bugzil.la/1811321

Also interested: https://bugzil.la/1863583

<h3>Video Sample Page</h3>

<p>This is the video we will work with. It uses disablePictureInPicture="true"</p>
<div id="container">
  <video id='video' disablePictureInPicture="true" controls="controls" preload="none" width="600" poster="https://assets.codepen.io/32795/poster.png">
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
  </video>
</div> <!-- End Container -->

Firefox results: https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/disablePictureInPicture#browser_compatibility

115 ESR 116.0.3 120
Failed
(mess at bugzilla)		 Failed
at Windows 7		 Works
at Windows 11

Someone can try in 117.0 or 117.0.1 at Windows 10, macOS or GNU/Linux.

Upvotes: 1

Related Questions