CODEWITHSUNDEEP
html5-video
Holly
Holly

Reputation: 7752

How to disable Picture in Picture mode on HTML5 video

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>

Upvotes: 41

Views: 73163

Answers (3)

Shady Mohamed Sherif
Shady Mohamed Sherif

Reputation: 15759

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 disablePictureInPicture It can get more support by time.

Upvotes: 2

AmerllicA
AmerllicA

Reputation: 32572

Use this:

<video controls disablePictureInPicture>

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

Upvotes: 1

Offbeatmammal
Offbeatmammal

Reputation: 8238

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>

Upvotes: 82

Related Questions