Media & Capture

Document Picture-in-Picture

Probing…

Document Picture-in-Picture is a web platform capability in the Media & Capture category. A floating window with arbitrary HTML content. Supported in Chromium 116+; not available in Firefox and Safari. Requires a secure context (HTTPS or localhost) and a user gesture such as a click or tap.

Secure contextUser gesture

Try it

Loading demo…

Code

const pip = await documentPictureInPicture.requestWindow({ width: 320, height: 180 })

// Move a real DOM node into the floating window
pip.window.document.body.append(widgetEl)

pip.addEventListener('pagehide', () => {
  holder.append(widgetEl) // move it back
})

Browser support

Chromium
116
Firefox
No
Safari
No

Frequently asked questions

Which browsers support Document Picture-in-Picture?

Supported in Chromium 116+; not available in Firefox and Safari.

Does Document Picture-in-Picture require HTTPS?

Yes. Document Picture-in-Picture needs a secure context, so it only works over HTTPS (or on localhost during development).

What is Document Picture-in-Picture used for?

A floating window with arbitrary HTML content.

Can I try Document Picture-in-Picture in my browser?

Yes. shwcs.net runs a live Document Picture-in-Picture demo that probes your current browser and lets you try the API. Everything runs locally — nothing is sent anywhere.

MDN reference ↗ Specification ↗