Have you ever needed to scan a recipe while also watching a cooking video? Or perhaps you wanted to watch a recording of a lecture while also looking at the course slides. Or maybe you wanted to watch somebody stream themselves playing video games while you work.
We’ve recently shipped a version of Firefox on our Beta and Developer Edition release channels with an experimental feature that aims to make this easier for you to do!
Picture-in-Picture allows you to pop a video out from where it’s being played into a special kind of window that’s always on top. Then you can move that window around or resize it however you need!
There are two ways to pop out a video into a Picture-in-Picture window:
Via the context menu
If you open the context menu on a
<video> element, you’ll sometimes see the media context menu that looks like this:
There’s a Picture-in-Picture menu item in that context menu that you can use to toggle the feature.
Many sites, however, make it difficult to access the context menu for
<video> elements. YouTube, for example, overrides the default context menu with their own.
You can get to the default native context menu by either holding Shift while right-clicking, or double right-clicking. We feel, however, that this is not the most obvious gesture for accessing the feature, so that leads us to the other toggling mechanism – the Picture-in-Picture video toggle.
Via the new Picture-in-Picture video toggle
The Picture-in-Picture toggle appears when you hover over videos with the mouse cursor. It is a small blue rectangle that slides out when you hover over it. Clicking on the blue rectangle will open the underlying video in the Picture-in-Picture player window.
Note that the toggle doesn’t appear when hovering all videos. We only show it for videos that include an audio track that are also of sufficient size and play length.
The advantage of the toggle is that we think we can make this work for most sites out of the box, without making the site authors do anything special!
Using the Picture-in-Picture player window
The Picture-in-Picture window also gives you the ability to quickly play or pause the video — hovering the video with your mouse will expose that control, as well as a control for closing the window, and closing the window while returning you to the tab that the video came from.
Asking for your feedback
We’re still working on hammering out keyboard accessibility, as well as some issues on how the video is displayed at extreme window sizes. We wanted to give Firefox Beta and Developer Edition users the chance to try the feature out and let us know how it feels. We’ll use the information that we gather to determine whether or not we’ve got the UI right for most users, or need to go back to the drawing board.
We’re particularly interested in feedback on the video toggle — there’s a fine balance between discoverability and obtrusiveness, and we want to get a clearer sense of where the blue toggle falls for users on sites out in the wild.
So grab yourself an up-to-date copy of Firefox 69 Beta or Developer Edition, and give Picture-in-Picture a shot! If you’ve got constructive feedback to share, here’s a form you can use to submit it.
If you liked Testing Picture-in-Picture for videos in Firefox 69 Beta and Developer Edition by Mike Conley Then you'll love Web Design Agency Miami