Implement Picture-in-Picture on the Web

Ananya Neogi on January 16, 2019

One of my favourite things to do on the web is to implement and test out new and upcoming features. Today we are going to implement Picture-in-Pict... [Read Full]
markdown guide

Really nice article Ananya!
I'm glad you enjoyed playing with the Picture-in-Picture Web API ;)

For info, we're currently working on awesome features for the next iteration of this API:

  1. Media Session integration: playback controls in the Picture-in-Picture window such as next track, previous track, etc.)
  2. Auto Picture-in-Picture: gives the browser to ability to automatically enter and exit Picture-in-Picture for a video when it makes sense.

Have a look and let us know what you think!


Thanks! 🙂
The Media Session integration definitely seems like a good idea!
For the auto Picture-in-Picture, the use case you provided for video meetings does seem like a good fit for it however I would think that giving the user an option to enable/disable the auto Picture-in-Picture mode would be nice.


Rest assured that the Auto Picture-in-Picture mode will be available only to web apps user trust enough. See


Oh god, this reminds how much I hope people stop implementing these things and making the awful autoplay videos that then follow me around when I didn't care about them in the first place.

This is why I need more and more browser extensions all the time, to block these things.

"so that users may continue consuming media while they interact with other content sites, or applications on their device" - what about the people who hate websites deciding what I want to do?


Case in point #facebook pip. It was an awful experience when the pip feature just decided to have a life of its own like a rogue AI. It annoyed me greatly while experiencing it.

Choice is all that matters for the end users.


This is based on user interaction. The user has an option to enable/disable the PiP mode.


Nah, typically it's based on the assumption that the user WANTS it, and "giving me an option" to disable it is just not right. If I, as a brand new user, land on your website and start scrolling past some video, and suddenly it pops out and starts following me around and I then have to stop what I was doing to close that thing, that's not ok.

These things additionally often have awful bugs where e.g. the autoplay on the video might be disabled otherwise (as it ALWAYS should be unless specifically on Youtube or other purely video content website), but then when the video pops out and starts following me around it suddenly starts playing by itself and then I first close it, and then I have to find where it vanished so I can try to figure out how that custom video player (please guys, stop doing that) can be paused. Worst case scenario I have to open developer tools and just delete the DOM nodes to make that thing shut up.

It's like spamming me with popups asking me if I want to sign up for your newsletter, or if I want desktop notifications from your random site? The answer is always no, and developers thinking they are doing good because they're giving me an option to say no is enough, is what pisses me off and why I need so many browser extensions.



I have implemented PIP myself through HTML, but the problem is i need to get the events for closing picture in picture and maximize window separately.
Right now, the event i'm getting is 'leavepictureinpicture'.

If anyone has any thoughts in this one, it would be really helpful.



Amazing :) Thanks. Before I heard this, I use our polyfill solution :)


Our polyfill similar to this repository

I know all features won't work if the browser doesn't support.


Awesome, i learned something today. I totally wasn't aware of this feature.


Very cool Ananya, the demo worked perfectly for me. It'll be interesting to see how this gets adopted across different sites. Any use cases you're interested in seeing first?


Thanks! 🙂
I spend a lot of time watching conference talks and video shorts on Vimeo so I would love this feature over there. YouTube has implemented a miniplayer feature recently but it only seems useful while you're on YouTube, if PiP gets implemented, we would be able to watch YouTube videos while doing other work too!


In the mean time, you can install Picture-in-Picture extension and use the Alt+P keyboard shortcut on YouTube to toggle Picture-in-Picture seamlessly. That's what I do on a daily basis and I love it ;)

Ah! Didn't know about this! Thanks for sharing 🙂

code of conduct - report abuse