PICTURE IN PICTURE MODE

The Picture-in-Picture API allow websites to create a floating, always-on-top video window. This allows users to continue consuming media while they interact with other sites or applications on their device.

How Does it work ?

A new DocumentPictureInPicture object instance representing the always-on-top Picture-in-Picture window for the current document context is available via Window.documentPictureInPicture. The Picture-in-Picture window is opened by calling the DocumentPictureInPicture.requestWindow() method, which returns a Promise that fulfills with the window's own Window object. The Picture-in-Picture window is similar to a blank same-origin window opened via Window.open(), with some differences:

• The Picture-in-Picture window floats on top of other windows.
• The Picture-in-Picture window never outlives the opening window.
• The Picture-in-Picture window cannot be navigated.
• The Picture-in-Picture window position cannot be set by the website.
• The Picture-in-Picture window is limited to one per browser tab at a time, with the user agent
• potentially further restricting the global number of Picture-in-Picture windows open.

Apart from that, you can manipulate the Picture-in-Picture window's Window instance however you want, for example appending the content you want to display there onto its DOM, and copying stylesheets to it so that the appended content will be styled the same way as when it is in the main window. You can also close the Picture-in-Picture window (by clicking the browser-provided control, or by running Window.close() on it), and then react to it closing using the standard pagehide. When it closes, you'll want to put the content it was showing back into the main app window. See Using the Document Picture-in-Picture API for a detailed usage guide.

Click On Start to See