Person holding a photo of a boat.

The future of Picture-in-Picture

Published on

Before the Document Picture-in-Picture API, it was only possible to put an HTML <video> element into a Picture-in-Picture window. This new API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. It is available as an origin trial starting in Chrome 111 on desktop.

A Picture-in-Picture window playing Sintel trailer video.
A Picture-in-Picture window created with the Document Picture-in-Picture API (demo).

The new API provides much more than is available from the existing Picture-in-Picture API for <video>. For example, you can provide custom controls and inputs (for example, captions, playlists, time scrubber, liking and disliking videos) to improve the user's Picture-in-Picture video player experience.

With a full Document in Picture-in-Picture, video conferencing web apps can combine multiple video streams into a single Picture-in-Picture window without having to rely on canvas hacks. They can also provide custom controls such as sending a message, muting another user, or raising a hand.

The following code snippet shows you how to toggle Picture-in-Picture for a custom video player.

async function togglePictureInPicture() {
// Close Picture-in-Picture window if any.
if (documentPictureInPicture.window) {

// Open a Picture-in-Picture window.
const pipWindow = await documentPictureInPicture.requestWindow({
initialAspectRatio: 640 / 360,
copyStyleSheets: true,

// Move video to the Picture-in-Picture window.
const video = document.querySelector("#video");

// Listen for the PiP closing event to move the video back.
pipWindow.addEventListener("unload", (event) => {
const videoContainer = document.querySelector("#videoContainer");
const pipVideo ="#video");

Check out Picture-in-Picture for any Element, not just <video> for more information.

Developer feedback is really important at this stage, so please file issues on GitHub with suggestions and questions.

Hero image by Jakob Owens.

Published on Improve article


Private Network Access update: Announce extension of the Deprecation Trial


Experimenting with measuring soft navigations

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.