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.
Update: Google enabled Picture-in-Picture mode in Google Chrome by default. You can skip the "enabling" part of this guide and go straight to the using part after you are done with the introduction. The feature works on YouTube only for now if you don't install the extension; if you install Picture-in-Picture Extension (by Google), it should work on most video sites. End
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).
- chrome://flags/#enable-experimental-web-platform-features --Â Enables experimental Web Platform features that are in development.
- chrome://flags/#enable-surfaces-for-videos .. Enable compositing onto a Surface instead of a VideoLayer for videos.
- 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.
Now You: Do you use picture-in-picture mode already? Would you like to see it in your browser? (via Bleeping Computer)
How do you disable picture-in-picture mode? It automatically activates when I change tabs, and I never want it to activate ever.
Picture in picture has become the new way advertisers clutter my screen with distracting garbage I never wanted to see. PLEASE explain how to shut off Picture-in-picture functionality. I never wanted it. I never needed it. And it is making my computer difficult to use!
+1
I’ve been using it in Iron browser for ages. https://www.youtube.com/watch?v=k2h5CrUQHK8
It already exists in Opera stable !
You don’t need Chrome Canary. I can enable it in Chrome Dev and Vivaldi (which isn’t even based on Chrome Canary, nor Dev) as well.
after reading Rick A.’s comment and checking out the links provided, leads me to believe that the WebExtension that I tried out was ‘Iridium’, as I mentioned in my previous comment, I did not like that the YouTube video panel opens up in its own little separate browser window because it will get over shadowed by another maximised browser window, I want something that superimposes the video at a reduced size on top of the browser window that I am currently on, so that I can watch some YouTube as I am doing really monotonous work, preferably with the ability to move the ‘caption’ (a more apropriate term escapes me now) into different positions
thanks for sharing those links Rick A., I look forward to reviewing them to see if any extension serves my needs
i’ve been doing this for a year or 2 on YouTube with Firefox using these 3 extensions:
Enhancer For YouTube:
https://addons.mozilla.org/EN-uS/firefox/addon/enhancer-for-youtube/
https://chrome.google.com/webstore/detail/enhancer-for-youtube/ponfpcnoihfmfllpaingbgckeeldkhle
https://addons.opera.com/en/extensions/details/enhancer-for-youtube/
https://www.microsoft.com/en-us/store/p/enhancer-for-youtube-for-microsoft-edge/9n4f8m7plt38
and for the New YouTube Layout only
iridium For YouTube:
https://addons.mozilla.org/en-US/firefox/addon/particle-iridium/
https://chrome.google.com/webstore/detail/iridium/gbjmgndncjkjfcnpfhgidhbgokofegbl
https://github.com/ParticleCore/Iridium
https://github.com/ParticleCore/Iridium/wiki/Features
and for the old YouTube Layout only
https://addons.mozilla.org/en-US/firefox/addon/youtube-plus/
https://addons.opera.com/extensions/details/particle/
https://github.com/ParticleCore/Particle
https://github.com/ParticleCore/Particle/wiki/Features
i use all 3 extensions because they all can do something that the others can’t do.
Now i know these only work on YouTube, but i only need that feature on YouTube.
Some websites do this feature automatically.
The extension Magic Actions is now a joke, only gets updated on Google Chrome-(Opera and Firefox have been abandoned) and the devs call people Trolls and Liars if they don’t leave a perfect 5 Star ratings and eventually remove the bad reviews-(although they don’t do this like they used to), they even have used fake accounts to leave ridiculously fake 5 star reviews.
A lot more complete implementation of PIP for Youtube is available here: https://chrome.google.com/webstore/detail/videonail-floating-youtub/nbpbjchgemnjhcpomnbjkkcfloafbema?hl=en 😊
Would be nice to have something like this for Firefox, I came across an extension once which allows for YouTube videos to play in a separate window, I tried to look for it just now but I could find it, the downside of it is that the window goes out of focus whenever it is not selected, the reason I wanted to get a ‘picture in picture’ WebExtension was so that I could watch YouTube videos as I am browsing through the web, the preference being that the window in which YouTube would be playing in would be in the foreground so that the window will be played on top of the others
The ‘Sidebar for YouTubeâ„¢’ WebExtension, seems interesting though
Hi
Can you add link?
Thanks
Sorry for that, here it is https://github.com/beaufortfrancois/picture-in-picture-chrome-extension/archive/master.zip
I enabled it yesterday in Chrome Dev and it’s working okay but still has some bugs.
I can’t close the pip and continue watching the video in the main browser window without refreshing the tab which ends up starting the video at the beginning. You can move the pip to a different location on the display and you can grab the edges of the video to make the pip bigger but that will stretch it and messes up the aspect ratio, you have to make a guess on the correct proportions to use. Once the extension was loaded I was able to disable the “Developer mode” and the extension still works, I wasn’t aware that could be done.
I was able to open and close tabs, navigate pages, open links, minimize Chrome Dev, and the pip continues to play. And I like that it stays on top of any open program windows. Depending on how big the display that is being used is, I can see picture-in-picture being very useful. I watch a lot of vlogs and other embedded video online and would use this in Firefox if/when it becomes available. I don’t see myself moving to Chrome as my primary browser to use this. Anyway… that’s my story and I’m sti sti sticking to it! LoL
Screenshot of YouTube video — The Librarian – SNL:
https://s31.postimg.cc/8a81gx8qz/Picture-in-_Picture_Chrome_Dev.png
On Android too: imgur.com/AiPtSnU
And of course, it doesn’t work on YouTube…
NewPipe the YouTube alternative for Android has had this since forever. I wouldn’t use Chrome on Android so I wouldn’t care about that.
NewPipe isn’t on the Play Store, because Google won’t allow it since it can play audio in the background. xD