Picture-in-picture for any element

This feature is not (yet) supported on your device

The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content, not just a <video> element.

On iOS, you may need to enable MediaRecorder in:
Settings > Safari > Advanced > Experimental Features > MediaRecorder

Demo

Click the "+" button of the web cam Web component below to start your web cam. Then click the "Start picture-in-picture" button and see that the entire Web Component is moved to the picture-in-picture window.

You can use all controls of the Web Component while it's in the picture-in-picture window.

pipButton.addEventListener('click', async () => { // open the picture-in-picture window and save the reference to it const pipWindow = await documentPictureInPicture.requestWindow({ width: 800, height: 600 }); // get a reference to the web cam Web Component const webCam = document.querySelector('web-cam'); // add the web cam to the picture-in-picture window pipWindow.document.body.appendChild(webCam); // when the picture-in-picture window is closed, remove the web cam from it and append it back // to its container the main document pipWindow.addEventListener('unload', (e) => { const webCamContainer = document.querySelector('.web-cam-container'); const webCam = e.target.querySelector('web-cam'); webCamContainer.appendChild(webCam); }) });

Documentation

Document Picture-in-Picture API on MDN

Browser support

Document Picture-in-Picture API on caniuse.com