Do we need a new CSS media query for future use cases?

zouhir commented 6 years ago

Glad to see this shipped in Chrome! in the last day or so I saw a lot of great reaction from the press and bloggers about it, congrats!

In today's scenarios (scenario 1):

No document fragment (video element only)
No custom controls

I do believe no extra CSS effort is needed, but for future expansion, when supporting a document fragment, do we need to change anything?

browser 1

Future use cases (scenario 2):

Looking at today's web community reaction in blogs & press, I can see a lot of love and willingness to adapt it! are we going to see:

Map \ Navigation like in Android & Google maps today (very amazing feature)
Arbitrary document fragment which the proposal stated interest in supporting

In my personal opinion, as a web developer, I will be facing a little confusion in:

PiP width is 380px (phone media query) but is not phone, I will likely need different UI\UX for phones and PiP.
PiP might be resized to equal, 50%, of a user screen width and we might need to change sizes and positions between 380px and 620px for example, scanning the resize with JavaScript might add complications.

Suggestion (is it an overkill 😅)?

picture-in-picture media query

Detect and modify the styles of elements in PiP overlay window with a media query

 @media picture-in-picture and (max-width: 160px) {...}

 @media picture-in-picture and (min-width: 560px) {...}

:in-pip pseudo CSS class

Trigger in-pip to change things in the original doc fragment.

.original-doc-fragment:in-pip {
    opacity: 0.3; 
}

beaufortfrancois commented 6 years ago

Thank you @zouhir.

As we've talked at TPAC, I'm closing this as I've just added the arbitrary-dom label. We'll revisit this when we start thinking about allowing arbitrary DOM elements to request Picture-in-Picture.