How to disable Picture in Picture mode on HTML5 video

Question

How do you disable Picture in Picture mode on html5 videos?

Please note I'm not referring to this question which relates to Apple's AVKit

I know you can disable video download with controlsList="nodownload", how is it possible for Picture in Picture mode.

<video controls controlsList="nodownload">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
</video>

Offbeatmammal · Accepted Answer · 2019-07-03T23:42:26.287

75

per the spec at https://wicg.github.io/picture-in-picture/#disable-pip, the attribute to control this is disablePictureInPicture

<video controls disablePictureInPicture controlsList="nodownload">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
</video>

to achieve the same through javascript:

<video id="vid" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>
<script>
vid=document.getElementById("vid")
vid.disablePictureInPicture = true
</script>

edited Jul 03 '19 at 23:42

answered Jan 31 '19 at 21:30

Offbeatmammal

7,970
2
33
52

@m93a same with 76 on macOS. Guess there's a bug that needs reporting... – Offbeatmammal May 26 '20 at 00:24
I don't think `kitsune` is the right place to report this. [Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1545554) is the place to report Firefox bugs. – m93a May 26 '20 at 07:05
yeah, I realised after I did it! feel free to report it – Offbeatmammal May 26 '20 at 21:45
7

https://bugzilla.mozilla.org/show_bug.cgi?id=1611831 Mozilla considers not following the spec is a feature. – kursus Jun 02 '20 at 13:09
Works for Opera's annoying pop-out feature too! – beerwin May 28 '21 at 11:58
Seems like this toggle does nothing fore Firefox 102.0. – Jonny Jul 04 '22 at 01:37
as per comment above, Mozilla deliberately decided to ignore the spec for this. I guess more comments/feedback on the bug might help get it re-visited https://bugzilla.mozilla.org/show_bug.cgi?id=1611831 – Offbeatmammal Jul 05 '22 at 02:54

Shady Mohamed Sherif · Answer 2 · 2022-10-15T22:20:18.380

If you want to do it through JavaScript. This code applies for all videos on your page and it disables the download,take picture and right click context which also contains download option.

You may want to change jQuery to $ I wrote this code add it to my theme in WordPress to disable the download in all videos in my site.

jQuery('video').on("loadeddata", function() {
    jQuery('video').attr('controlsList', 'nodownload');
    jQuery('video').bind('contextmenu',function() { return false; });
    jQuery('video').attr('disablePictureInPicture', 'true');
});

Notes:

1- you are applying the attributes and binding the function to all <video> elements of the page for each of them which triggers the loadeddata event. You must replace jQuery('video') with jQuery(this) inside the loadeddata event handler.

2- disablePictureInPicture is supported by most of the browsers but not all of them It can get more support by time.

Note that you are applying the attributes and binding the function to **all — Marco Sacchi, Oct 22 '21 at 10:18

score 0 · Answer 3 · answered Feb 19 '22 at 22:14

0

Use this:

<video controls disablePictureInPicture>

The disablePictureInPicture is a boolean flag that would disable picture in picture item in three dots menu.

answered Feb 19 '22 at 22:14

AmerllicA

29,059
15
130
154

How to disable Picture in Picture mode on HTML5 video

3 Answers3

Linked