html5-video

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>

Solution

  • 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>