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…


20 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

    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

      1. dbgarza

        I think he means that for example you set a Youtube video on picture in picture mode and then change to another tab and still watch the video.

        And the answer is yes. Right now I have a youtube video on picture in picture mode right besides this Firefox tab and it works flawlessly :)

        July 11th, 2019 at 22:40

  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

    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

  3. Kai

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

    July 11th, 2019 at 13:56

    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

  4. dbgarza

    This has to be a great feature. Now I can browse facebook and have a youtube video on a side of the screen in a nice comfy size :D

    Keep up the good work! :)

    July 11th, 2019 at 22:42

  5. Josh Brickner

    I am testing this on Linux (I enabled the flags in about:config). In 68 it worked well on netflix but now the PiP button doesn’t even show? Will this feature be restricted on DRM content or is this just part of using a beta? :)

    July 13th, 2019 at 19:58

    1. Mike Conley

      The Netflix issue is a known bug that we hope to address in this bug.

      July 18th, 2019 at 10:17

  6. Paul

    Hello,

    It’s so cool that you bring PIP in firefox as Chrome and Safari did!

    I was wondering if you plan to let us use custom button instead of the default button (blue button) by accessing the PIP API directly ?

    I was trying the `document.pictureInPictureEnabled` but it returns `false` and the `requestPipctureInPicture` return `PIP not supported`.

    Thanks by advance

    July 18th, 2019 at 01:24

    1. Mike Conley

      This feature does not include the Picture-in-Picture WebAPI, which I believe you’re referring to. This is purely a browser feature, with no visibility to the underlying webpage. You can track our position on the Picture-in-Picture WebAPI spec here.

      July 18th, 2019 at 10:18

  7. Patrick

    What’s with the native function from MacOs like Safari supports it for a whole while now? Why don’t you support this already?

    July 18th, 2019 at 08:47

    1. Mike Conley

      We’re focusing on Windows first, and then will attempt to add support for macOS.

      July 18th, 2019 at 10:19

  8. javier enciso

    Just enabled it on Firefox nightly on Mac . Works perfect!
    Use this feature with some plugin on chrome that only works on youtube, but this worked flawless on several other sites (news sites).

    Thanks fot this!

    July 19th, 2019 at 05:09

  9. Will Friend

    Seems to work well for me in Windows 8.1 x64. However, could you please consider making the Picture-In-Picture remember the last size and position? On my system videos pop up in the lower left screen corner at 852×480 (my screen resolution is 2560×1440).

    Great improvement!

    July 19th, 2019 at 12:54

  10. Dmitry

    Finally feature I’ve waited for so long! But I have an issue with resize. I just can’t resize player in PiP mode. I’m using 69 beta on macos 10.14.5

    August 2nd, 2019 at 00:34

    1. Mike Conley

      Hi Dmitry,

      Picture-in-Picture is not enabled by default on macOS because there are certain parts of it (resizing the player window, keeping the player window always on top) that are not completed. We hope to complete them soon.

      -Mike

      August 2nd, 2019 at 06:41

  11. Simon

    This a great feature and it is very well implemented ! The floating window is nice to use.
    It works fine on my linux system (after I enable the feature in about:config).

    August 2nd, 2019 at 00:43

  12. Jim Ley

    It works “okay” found lots of times it’s not on top and right click close on the window makes the ugly blue cta not work. when the video changes it goes white which is a bit ugly, but that’s all minor stuff.

    How do you get rid of the blue box CTA, it appears to always be there? which makes watching videos not in PIP quite difficult.

    The UX integration is less clear though, the fixed position and it hiding with various on screen UX works well in that it manages to stay hidden so not interfering with the user, but it does prevent the user from accessing the feature, which is of course where the API use comes as a use case)

    Where a video is being used as a “background”, the blue pip button is confusing and ugly.

    Then there’s the lack of integration with the player which is a bigger problem, a fullscreen button would want to cancel PiP in response to the users request to go fullscreen, there’s no-way to do this, or know it’s in PiP to disable the fullscreen button / provide hints on what to do. Similarly users scrolling in articles can often have an in page PIP experience provided to them, where the player scrolls with them down the page – when PiP’d this should be disabled, but unless the page knows of the PiP it can’t do it.

    Audio PiP (using canvas video to provide the audio controls and what’s playing visuals on radio stations without actually delivering a video to the user) is another welcomed feature of PiP, that use case could be done with the above API, but only if the video itself was always in the page to allow the initiation, that seems wasteful and likely confusing for the user to manage such a design.

    Mostly this comment is an encouragement to implement the API.

    August 9th, 2019 at 03:49

Comments are closed for this article.