Enable Chrome's new Picture-in-Picture mode

Google is working on bringing a new picture-in-picture mode based on a W3C API to Google Chrome; Chrome Canary users may enable the new functionality in the web browser already while users who run other versions of Chrome need to wait until the feature lands in their browser versions.

The implementation is based on a standardized API for picture-in-picture functionality that moves videos that play in the web browser in a small overlay window that acts independently of the main browser window.

The new picture-in-picture API works on the majority of sites by default; website publishers may utilize it to customize the picture-in-picture experience on their sites; it is possible to change the size of the picture-in-picture interface, customize controls, add restrictions, or use it to gather statistical data.

Apple implemented the picture-in-picture API in Safari for Mac OS X and iOS, and Google decided to create an experiment for Chrome to determine whether it is worthwhile to implement the API in the stable version of the web browser.

Google plans to launch the experiment in Chrome 68 Beta and will end it when Chrome 69 Stable is released. In other words, the experiment will run between June 7, and August 30, 2018.

Google Chrome Canary users may enable picture-in-picture support in the web browser right away. Note that the implementation is not super-stable right now but that it works on the majority of sites with video content.

Here is what you need to do:

Enable experimental flags

Load the following three URLs in the Chrome browser's address bar and enable the experimental flag in Chrome Canary. I suggest you enable all three and restart Chrome afterward (Chrome asks you for a restart when you change the status of any of the three preferences).

1. chrome://flags/#enable-experimental-web-platform-features -- Enables experimental Web Platform features that are in development.
2. chrome://flags/#enable-surfaces-for-videos .. Enable compositing onto a Surface instead of a VideoLayer for videos.
3. chrome://flags/#enable-picture-in-picture -- Enable the Picture-in-Picture feature for videos

Install an experimental browser extension

Download the following file from GitHub and extract it on the local system. It includes an extension for Google Chrome that unlocks the picture-in-picture mode implementation in the web browser when installed.

Load chrome://extensions once you have done that and slide the "Developer Mode" toggle to on to enable Developer Mode and the ability to load local extensions in the web browser.

Select "load unpacked" and browse to the /src/ folder of the archive that you unpacked on the local system.

Chrome should load the new picture-in-picture extension and add an icon to the main Chrome toolbar.

Use Picture-in-Picture mode in Chrome

Activate the extension icon with a click or tap on any page with a video to push the video to the picture-in-picture popup.

The implementation has several limitations right now:

• Only the first video is played in picture-in-picture mode. The next video, if autoplay is enabled, is not loaded automatically in the mode but plays in the main browser window.
• The page the video is embedded on needs to remain open.
• You cannot really navigate to another page in Chrome without video playback moving back to the main browser window, but you can use different programs.

The picture-in-picture mode works on YouTube, Vimeo and many other video sites automatically.

Opera Software implemented a custom picture-in-picture mode solution in the Opera browser. No word yet from Microsoft or Mozilla in regards to API support.