Is it really necessary to have a title bar in PiP window? Videos don't have it

[robbi73]

Is it really necessary to have a title bar in PiP window?
Also it would be nice to be able to further reduce the size of the window.
At the moment I can't open a PiP window with size 200px x 200px

[steimelchrome]

Thanks for the feedback, though this question is better suited for crbug.com than here. This repo is for the spec, and this spec doesn't enforce that the user agent have any title bar nor does it enforce a minimum PiP window size.

As far as the Chrome implementation goes, we decided to have the titlebar for anti-spoofing purposes. By always showing the origin, the user knows where the content is coming from. By having the titlebar, it less easily blends into whatever it's on top of. The reason we don't need it for video PiP is that video PiP isn't fully interactable content, so a user can't be spoofed to type their password for example.

For the sizing issue, I'll bring that up with our UX folks to see if there's a way to further reduce the minimum size while keeping necessary UI components.

[robbi73]

I was thinking about a possible solution for both window size and titlebar.
One might think of a hidden title bar that appears only when the onmouseenter\over event is fired (above or below the window itself).
Furthermore, if the window is too small to visualize the origin entirely, one could think of:
a) a tooltip (the one that already appears when we position the mouse over the label of a card)
b) or a scrolling writing (like marquee)
inside the same title bar.

[DiodeDan]

Agreed, in my experiments the minimum window size was 300 x 300. What happens if I want to make a player controller like the Apple Music mini bar? That's too large.

[egm0121]

I've noticed that the min. dimensions for a standard pop up window are much smaller, would it be possible to use the same minimum values for the width and height of the PIP windows?

[steimelchrome]

Thanks for the feedback. It seems likely that we'll end up making the minimum height significantly smaller than it currently is (on Chrome), but I'm not yet sure on the width.

[rlingineni]

@steimelchrome - do you know when we could take smaller windows for a spin?

[albertpratomo]

@steimelchrome +1 for making the minimum window size smaller than 300x300

[steimelchrome]

There's an issue on some platforms where dialogs get clipped by browser windows, which blocks us from allowing a smaller height. I have a fix out for review to make them work for PiP, and once that lands I'll land a followup change to allow for a shorter height. If all goes well then it'd be in M118

[buditanrim]

Hi, we're developing a chrome extension that wants to use Picture in Picture for pomodoro. But the window is too big now, we're hoping to have a compact PiP so it doesn't taking too much of the user's screen real estate.
Is there any update on the custom size feature?

[beaufortfrancois]

Chrome 118 (Canary at the time) has reduced the minimum height to 52px: https://chromiumdash.appspot.com/commit/79d9b185bf4115c2bc6cbe919655f7a4cb940f24
Minimum width changes are coming soon after IIUC.

[buditanrim]

@beaufortfrancois thank you.
Quick question: Does the ratio still have to be 1:1?
For example, I want to make the PiP size to be 210 x 150px, is this possible?

[beaufortfrancois]

The ratio is inferred from the width and height you pass to requestWindow():

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow({
    width: 210,
    height: 150,
  });

It doesn't have to be 1:1. You can try in Chrome Canary:

[Xaekai]

As far as the Chrome implementation goes, we decided to have the titlebar for anti-spoofing purposes. By always showing the origin, the user knows where the content is coming from. By having the titlebar, it less easily blends into whatever it's on top of.

If the desired usage of the dPIP is just a video element with a canvas overload for subtitles, the forced display of the title bar would be obnoxious. Would it be possible to only display the titlebar if elements that take user text input are present?