![François Beaufort](https://web.dev/images/authors/beaufortfrancois.jpg) François Beaufort [GitHub](https://github.com/beaufortfrancois)

<br />

Before the [Document Picture-in-Picture API](https://wicg.github.io/document-picture-in-picture/), 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](https://developer.chrome.com/docs/web-platform/document-picture-in-picture.md.txt#register-for-the-origin-trial) starting in Chrome 111 on desktop.
![A Picture-in-Picture window playing Sintel trailer video.](https://developer.chrome.com/static/blog/the-future-of-picture-in-picture/image/a-picture-picture-window-457c5c468d28f.png) A Picture-in-Picture window created with the Document Picture-in-Picture API ([demo](https://chrome.dev/document-picture-in-picture-api)).

The new API provides much more than is available from the existing [Picture-in-Picture API for `<video>`](https://developer.chrome.com/blog/watch-video-using-picture-in-picture.md.txt). For example, you can provide custom controls and inputs (for example, [captions](https://bugs.chromium.org/p/chromium/issues/detail?id=854935), 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](https://developer.chrome.com/blog/watch-video-using-picture-in-picture.md.txt#show-canvas-element-in-picture-in-picture-window). 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.

```javascript
async function togglePictureInPicture() {
  // Close Picture-in-Picture window if any.
  if (documentPictureInPicture.window) {
    documentPictureInPicture.window.close();
    return;
  }

  // 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");
  pipWindow.document.body.append(video);

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

Check out [Picture-in-Picture for any Element, not just `<video>`](https://developer.chrome.com/docs/web-platform/document-picture-in-picture.md.txt) for more information.

Developer feedback is really important at this stage, so please [file issues on GitHub](https://github.com/WICG/document-picture-in-picture/issues) with suggestions and questions.