1668863 - Picture-in-Picture video (twitter / periscope) displays sideways if the website has rotated it with CSS

Status: NEW

(Toolkit :: Picture-in-Picture, defect, P3)

Description

[Smylers]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

Played the video on this page, then pressed the ‘Picture in Picture’ icon to play it in its own window: https://twitter.com/ScottAdamsSays/status/1312029786861043712

Actual results:

The video appeared in its own video, but sideways! It's rotated 90° clockwise from how it displays on the page — a landscape video in a portrait window.

Expected results:

The video retained the orientation it had on the web page, with everything the right way up.

I'm guessing that the PIP window is actually showing the video in its native orientation, and the web page has rotated it for playing. But from a user's point of view, what the file's native orientation says is irrelevant: the video was fine, Firefox has rotated it, and now it's wrong.

If a user presses the PIP icon on a video playing in a web page which has been rotated, then the video should continue to be rotated by the same amount in the PIP window.

(Or, at least for a video that has been rotated by an integer multiple of 90°, which ensures the PIP window will be rectangular.)

Bug 1567719 already exists for the PIP icon being rotated and appearing in the wrong place. This likely has the same cause (and in both cases features a Periscope video embedded in Twitter), but is about the video iteself displaying wrongly, which that bug doesn't cover.

Comment 1

[:Gijs (out for now; he/him)]

Yeah, comment #0 is on the money. The PiP toggle button is also at the top, instead of at the side of the video, because the website has actually used a 90deg CSS transform to make the video appear straight. Because of course.

Comment 2

[Smylers]

Another data point, with a different transformation which may be clearer, and arguably a more reasonable use of applying a CSS transformation to a video: Whereby (a video call service) horizontally reflects your own camera's feed, so that for you it's like looking in a mirror.

On a computer with a camera, go to: https://whereby.com/bugzilla_check [an empty room I've just set up, to avoid gatecrashing anybody's genuine call]. You don't actually need to join the meeting; grant sharing your camera and the preview window shows a mirror image of your camera's video.

Press the ‘Picture-in-Picture’ icon (which is at the left), and the video window that pops out is no longer a mirror image, but as others see you. Again, this is surprising. A user would expect to get the same video they were viewing, just in its own window. (Regardless of the merits of seeing yourself the ‘correct’ way or reflected, it doesn't make sense for the interface for picking between them be whether you've PIP-ed the video or not.)

Comment 3

[:Gijs (out for now; he/him)]

(In reply to Smylers from comment #2)

Another data point, with a different transformation which may be clearer, and arguably a more reasonable use of applying a CSS transformation to a video: Whereby (a video call service) horizontally reflects your own camera's feed, so that for you it's like looking in a mirror.

We're already tracking this in bug 1672401, and there's a patch for it there. I think we'll need a separate patch for the rotation case...