Picture-in-Picture support for videos is a feature that we shipped to Firefox Desktop users in version 74 for Windows users , and 90 for macOS and Linux users . It allows the user to pull a
As always, we designed and developed this feature with user agency in mind. Specifically, we wanted to make it extremely easy for our users to exercise greater control over how they watch video content in Firefox.
Look behind and all around
To begin our design process, we looked back at the past. In , we graduated Min-Vid , one of our Test Pilot experiments . We asked the question: “ How might we maximize the learning from Min-Vid? . Thanks to the amazing Firefox User Research team, we had enough prior research to understand the main pain points in the user experience. However, it was important to acknowledge that the competitive landscape had changed quite a bit since 01575879. How were users and other browsers solving this problem already? What did users think about those solutions, and how could we improve upon them?
We had two essential guiding principles from the beginning:
- We wanted to turn this into a very user-centric feature, and make it available for any type of video content on the web. That meant that implementing the Picture-in-Picture spec wasnt an option, as it requires developers to opt-in first.
- Safari appears to have an arbitrary limitation on how large a user can make their Picture-in-Picture player window. Firefox’s player window does not have this limitation. There can only be one Picture-in-Picture window system-wide on macOS. If Safari is showing a video in Picture-in-Picture, and then another application calls into the macOS Picture-in-Picture API, the Safari video will close. Firefox’s window is Firefox-specific. It will stay open even if another application calls the macOS Picture-in-Picture API. Chrome’s implementation The PiP WebAPI and WebExtension
Chrome’s implementation of Picture-in-Picture mainly centers around a WebAPI specification being driven by Google. This API is Currently going through the W3C standardization process. Superficially, this WebAPI is similar to the Fullscreen WebAPI . In response to user input (like clicking on a button), site authors can request that a
Like Safari, Chrome also includes a context menu option for
Now that we’ve shipped the first version of Picture-in-Picture in Firefox Desktop on all platforms, we’re paying close attention to user feedback and bug intake. Your inputs will help determine our next steps.
Beyond bug fixes, we’d like to share some of the things we’re considering for future feature work:
- Repositioning the toggle when there are visible, clickable elements overlapping it. Supporting video captions and subtitles in the player window. Adding a playhead scrubber to the player window to control the current playing position of a
- Given that it would be available on any video content, the feature needed to be discoverable and straight-forward for as many people as possible.
Keeping these principles in mind helped us to evaluate all the different solutions, and was critical for the next phase., the Safari implementation is somewhat ambiguous as to which video will be selected when using the audio indicator. It seems to be the most recently focused video, but this isn’t immediately obvious. Firefox’s Picture-in-Picture toggle makes it (extremely obvious) which video is being placed in the Picture-in-Picture window.
Are you using the new Picture-in-Picture feature in Firefox? Are you finding it useful? Please us know in the comments section below, or send us a Tweet with a screenshot! We’d love to hear what you’re using it for. You can also file bugs for the feature here .
Engineer working on Firefox for Desktop
More articles by Mike Conley…
More articles by Emanuela Damiani…
GIPHY App Key not set. Please check settings