Testing Picture-in-Picture for videos in Firefox 69 Beta and Developer Edition

Editor’s Note: We updated this post on July 11, 2019 to mention that the Picture-in-Picture feature is currently only enabled Firefox 69 Beta and Developer Edition on Windows. We apologize for getting your hopes up if you’re on macOS or Linux, and we hope to have this feature enabled on those platforms once it reaches our quality standards.

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 for Windows 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:

Showing the default context menu when opened on a video element, with the Picture-in-Picture menu item highlighted.

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.

Showing the Picture-in-Picture toggle overlaying a video element on YouTube.

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 on Windows 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 also hoping to bring this same Picture-in-Picture support to macOS and Linux in the near future.

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 for Windows, 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.

Happy testing!

About Mike Conley

Engineer working on Firefox for Desktop

More articles by Mike Conley…

About Andreas Bovens

More articles by Andreas Bovens…


6 comments

  1. Jigar Shah

    Nice…I thought this will get into 68. Very innovative feature. Will it work across tabs ?

    July 10th, 2019 at 07:56

    Reply

    1. Mike Conley

      Hi Jigar,

      We’re still refining and experimenting with the feature, so for now it’s holding on Beta and Developer Edition. We’re glad you like it! I’m not sure what you mean by “Will it work across tabs” – can you please rephrase the question?

      July 11th, 2019 at 14:30

      Reply

  2. Robert

    Cool feature! Will it also be available for WebRTC video conferences? That’s where I’d need it the most (and often see people using skype for this specific feature)

    July 10th, 2019 at 09:26

    Reply

    1. Mike Conley

      Hi Robert,

      We’re glad you like it! I just tested it with talky.io, and it seemed to work. Picture-in-Picture on the self view video was a bit odd (since the site mirrors the video from left to right), but otherwise it seems to work alright. Give it a shot and let us know!

      July 11th, 2019 at 14:32

      Reply

  3. Kai

    I’m on dev 69b3 and picture-in-picture is not enabled for me :(

    July 11th, 2019 at 13:56

    Reply

    1. Mike Conley

      Hi Kai,

      It’s possible that you’re not on Windows. The initial version of this blog post failed to mention that for now this feature is only enabled on Windows for Beta and Developer Edition. We’ve updated the post to make that clearer, and we hope to bring the feature to macOS and Linux soon when it reaches our quality standards.

      July 11th, 2019 at 14:33

      Reply

Post Your Comment