Menu
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>
588
The native Picture-in-Picture API allows you to create a floating, pinned HTML5 video that overlays on top of your workspace. This API is seamlessly integrated into the HTMLVideoElement interface and is super simple to use: <video id="vid" src="my-video.mp4"></video> <button id="pip-btn">Enter PIP</button>
Go to the "Cookies and site permissions" section. Scroll down and find the "Picture in Picture control" option. As an option, you can use the e dge://settings/content/PictureInPicture URI in the address bar. Disable the "Show Picture in Picture control inside video frame" toggle option.
Step 1: Launch Firefox and click the menu button in the upper-right corner. Then select Options in the drop-down menu. Step 2: In the General section, scroll down the page to the Browsing option. After that, uncheck Enable picture-in-picture video controls. Now, the Picture-in-Picture mode has been disabled successfully.
Your browser does not support HTML5 video. To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
The HTMLVideoElement disablePictureInPicture property reflects the HTML attribute indicating whether the user agent should suggest the picture-in-picture feature to users, or request it automatically. A boolean value that is true if the user agent should suggest that feature to users.
To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
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>
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');
});
Use this:
<video controls disablePictureInPicture>
The disablePictureInPicture is a boolean flag that would disable picture in picture item in three dots menu.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
