How to disable Picture in Picture and download on HTML video

Video tag has some built-in functionality like download and the picture in picture mode. Sometimes we need to remove these behaviors.

Thiago Nunes Batista

By Thiago Nunes Batista

Updated at 4/26/2022

cover for How to disable Picture in Picture and download on HTML video

By

Updated at Invalid Date

Working with built-in browser functionality can be embarrassing, but, fortunately disabling the picture in picture mode is pretty simple, you just need to add the disablePictureInPicture attribute on your video tag. More details on mdn.

<video
  width="320"
  height="320"
  poster="somePosterLink.jpg"
  disablePictureInPicture

>
  <source src="someVideoLink.mp4" type="video/mp4" />
</video>

That will do the job, but an important thing to notice is that this will not work on Mozilla Firefox, according to the report on CanIuse.

Can I use the disablePictureInPicture attribute on the browsers? https://caniuse.com/?search=HTMLVideoElement.disablePictureInPicture

Disabling the download option

You need to add the nodownload string to the controlsList attribute on the video tag, but this will not work on Chrome or Safari.

<video
  width=”320"
  height=”320"
  poster=”somePosterLink.jpg”
  controlsList="nodownload"
>
  <source src=”someVideoLink.mp4” type=”video/mp4" />
</video>

Conclusion

The compatibility of the attributes on video tags are not good, if possible on your project, I would say to install an external library like Video.js or Plyr, besides having a great style, you will not need to go deep with the browser compatibilities problems. I hope you enjoyed the content. Consider following me on Medium for more articles on Web development.