While using video-sharing apps like YouTube, you've probably come across the picture-in-picture feature, which lets you pop out a video to a separate small window that you can watch while browsing the web. This always-on-top window was previously restricted to videos only, but a recent update to Google Chrome lets you pop out any element you want to this window.

Document Picture-in-Picture API

The Document Picture-in-Picture API extends the Picture-in-Picture API to let you open an always-on-top window that can contain any element. Here are 3 simple steps to use it:

1. First, check if your browser supports this API and if it does then request a window of it.

    if(){
    const pipWindow = await documentPictureInPicture.requestWindow();
    }
   

2. Then save the reference of the element in a variable

    let element = document.querySelector(".container");
   

3. Finally, append the element to the always-on-top window using the following code

    ...
    pipWindow.document.body.append(player);
   

Pitfall

One pitfall of this API is that the always-on-top window does not have access to any resources of the current window, such as styles and fonts. You must therefore provide these resources to the window.

As you can see here I rendered a card of a website inside the window but the styling and font are missing.

Also, it is only available in chromium based browsers right now.

Thanks for reading.