1940052 - PIP Mode video cut issue when on desktop mode (youtube.com).

Status: RESOLVED FIXED

(Firefox for Android :: Media, defect)

Description

[Rito Upadhyay]

Steps to reproduce

1. Enter Firefox app
2. Change desktop site to ON
3. Search YouTube in search bar
4. Once YouTube opens, play videos in landscape mode
5. Now from quick tile, go to settings
6. Browser goes to PIP mode.

Expected behavior

Video should play normally

Actual behavior

Blank screen or video cut issue is observed.

Device information

• Firefox version: 135
• Android device model:
• Android OS version: 12

Any additional information?

verified in chrome. Video plays normally in PIP mode for Desktop site ON

Comment 1

[Rito Upadhyay]

Any update on the issue?

Comment 2

[Rito Upadhyay]

This issue needs to be resolved on urgent basis. So, please let us know if there is any update on the reported issue.

Comment 3

[Titouan Thibaud [:titouan]]

Thanks for the report.
Severity and Priority are set based on this guide, which explains why I'm resetting them.

I cannot reproduce this bug. Which Android device model are you using? 
Can you please provide a screencast of this bug?

Comment 4

[Rito Upadhyay]

Attachment: Issue image

Comment 5

[Rito Upadhyay]

First Device Details

Device Name - Samsung s21 FE
Mozilla Firefox Version - 133.0.3
Android Version - 14

Second Device Details

Device name - Galaxy Tab A SM-T510
Mozilla Firefox Version - 133.0.3
Android version - 11

Steps to reproduce the issue

1. Open Firefox App
2. In search and address bar type Youtube
3. Click on www.youtube.com
4. Click on any videos
5. Once video is playing, from the menu icon turn ON Desktop Site
6. Play the video
7. Click on full screen icon there in video (Video will go to landscape mode).
8. Click on the edge of the screen to get the bottom navigation bar.
9. Click on Home button with video still playing and in full screen mode
10. Now, video goes in PIP mode.
11. Observe the video. Either screen goes blank or cut issue is observed while video is still playing.

Note : I have attached the screenshot of the issue in attachment section

Comment 6

[Rito Upadhyay]

Attachment: PIP in chrome

Comment 7

[Rito Upadhyay]

The description details - Issue image - PIP view in Firefox
The description details - PIP in chrome - PIP view in Chrome

In both the scenario same video is being played.

Comment 8

[Rito Upadhyay]

Dear Titouan Thibaud

Could you please help me with an update on the issue?

Comment 9

[Rito Upadhyay]

Any update on the issue?

Comment 10

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:titouan, could you have a look please?

For more information, please visit BugBot documentation.

Comment 11

[Titouan Thibaud [:titouan]]

I cannot reproduce this (tested on Xioami Mi 9, Android 11 ; Pixel 7, Android 15).

Can someone from QA reproduce this?

Comment 12

[Rito Upadhyay]

Any updated if QA is able to reproduce the issue? Because, it is 100% producible with the above mentioned steps.

Comment 13

[Delia Pop (Android QA)]

Attachment: QA.jpg

Confirming this issue is reproducible as described on all latest releases (Nightly 136.0a1 from 01/30, Beta 135.0b9 and Release 135.0). Tested with Samsung Galaxy A53 5G (Android 14), Samsung Galaxy Note 8 (Android 12) and LG G7 fit (Android 9).

Comment 14

[Rito Upadhyay]

Dear Team,

Since, the issue is reproduced, could you please let me know the next step towards resolving the issue?

Thanks.

Comment 15

[Rito Upadhyay]

Dear Titouan Thibaud

Please let me know if there in any update on the issue?

thanks.

Comment 16

[Rito Upadhyay]

Dear Team,

Do we have any update on the issue?

Comment 17

[Rito Upadhyay]

Dear Team,

As per QA Delia Pop, the issue is reproducible. However, I am yet to receive any update from your end. So, please let me know if there is any information regarding the issue.

Comment 18

[Cathy Lu [:calu]]

Hey Alastor, Can you take a look at this bug, why in desktop mode, pip mode video is not showing properly?

Android PictureInPicture (https://developer.android.com/develop/ui/compose/system/picture-in-picture) puts the top of the screen into a pip screen. Unlike most video sites, Youtube desktop mode fullscreen doesn't just include the video, it also allows users to scroll down to see the video description. It's basically just the Youtube page in full width. So sometimes pip mode shows a black screen or it'll put the Youtube toolbar into the pip screen. It happens because when you move from fullscreen to pip, youtube shows the toolbar very quickly. You can reproduce this more consistently when you scroll down in the page.

On the Android side, there's no way we can tell PictureInPicture Builder to put a specific part of the layout into pip. One solution would be to scroll the website to the top of the video so just the video is displayed in pip, but that would be susceptible to any changes Youtube makes to the site.

Since we've enabled desktop mode by default for all large screen/tablet devices, this bug will impact many more users. All tablet users will have issue with youtube in pip mode.

Is there something that can be done on the media side?

Comment 19

[Cathy Lu [:calu]]

Attachment: Scroll down a bit to see part of the video

Comment 20

[Alastor Wu [:alwu]]

John, is this something you could help with? This issue seems only happening on the desktop mode. Thanks!

Comment 21

[John Lin [:jhlin][:jolin]]

When in PIP mode, DevTools Page Inspector shows the video element top position is out of
viewport: <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" src="blob:https://www.youtube.com/8c4dc1c7-be56-438d-92f2-1193ee10cd4d" style="width: 195px; height: 110px; left: 0px;top: 185px;"></video>. After setting the top value to 0, the video content shows up.

On the other hand, chrome://inspect shows that the video element top value is 0 in Chrome: <video tabindex="-1" class="video-stream html5-main-video" controlslist="nodownload" style="width: 192px; height: 108px; left: 0px; top: 0px;" src="blob:https://www.youtube.com/9e84d97d-6353-440e-a65b-f1cffd6d0edd"></video>

What causes the layout differences is not clear, though.

Comment 22

[Alastor Wu [:alwu]]

Hi, Emilio, do you have any thought in terms of the comment 21? I wonder if this is something related with bug 1948841. Thanks!

Comment 23

[Emilio Cobos Álvarez [:emilio]]

I took a look, and no, it's not related to bug 1948841. What's going on is that Chromium has a special state that they set when they enter this "video in PiP" mode:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/platform/media/web_media_player_impl.cc;l=899;drc=cd505209c612e3b9e5aa7e574ba35b297ec794dc

Which basically ends up setting a flag in the <video> element, which makes it apply this rule:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/css/fullscreen.css;l=68;drc=4670338ccf46aaf26aee2402b0f722106d55b003

We could implement something like that without much trouble, I'd think. Main thing is making sure we have a flag telling us whether we're in this special "PiP fullscreen" state.

Comment 24

[Cathy Lu [:calu]]

Emilio, is the flag for Pip something the Android team can help with? Otherwise, is this something that can be fixed from your team soon?

Comment 25

[Emilio Cobos Álvarez [:emilio]]

It'd be useful to have someone from the android team at least implement the plumbing to get this into Gecko, yeah. I can mentor with the CSS bits, not sure I can commit to implementing it soon myself tho.

Comment 26

[Cathy Lu [:calu]]

Thanks Emilio, we can try to work on this soon. Do you have an example of how the CSS would be altered for the video in our existing code source? I'm wondering if it is just GeckoView calling a toolkit API to modify the CSS.

Comment 27

[Emilio Cobos Álvarez [:emilio]]

I'd plumb it similarly to how full-screen / display mode is plumbed... This kinda feels like a separate displayMode value?

Like here, IIUC.

Comment 28

[Cathy Lu [:calu]]

Attachment: WIP: Bug 1940052 - Apply fixed position css to Android pip media query

Comment 29

[Cathy Lu [:calu]]

Attachment: Bug 1940052 - Apply fixed position css to Android pip media query

Comment 30

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8aaff6c4db6d
Apply fixed position css to Android pip media query r=emilio,twisniewski

Comment 31

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/8aaff6c4db6d

Comment 32

[Cathy Lu [:calu]]

Can QA verify that pip mode is not working on desktop mode site?

Comment 33

[Lorand Janos]

Attachment: Screenshot_20250430_182201_One UI Home.jpg

Verified on the latest Nightly build (140.0a1 from 2025-04-30).

PiP works as expected, on some devices (example: Xiaomi Redmi Pad SE with Android 12 - Where desktop mode is by default).
Sometimes the screen is zoomed in, so the video is only partially displayed (example on a Google Pixel 7 with Android 16).
Sometimes the Youtube bar is present, cutting the video (example: Samsung Galaxy S23 Ultra with Android 14).

Comment 34

[Lorand Janos]

Attachment: az_recorder_20250430_182338_edited.mp4