search

mozilla-mobile / fenix

⚠️ Fenix (Firefox for Android) moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
6.47k stars 1.28k forks source link

Videos with different aspect ratio than device are zoomed in #8252

Closed Teelry closed 1 year ago

Teelry commented 4 years ago

Videos with a smaller aspect ratio will be zoomed in. For example, videos in 16:9 running on a device that has an 18:9 aspect ratio will zoom them in, making the user able to scroll up/down the video, which can be problematic if the user is watching a video with subtitles. It should be either not zoomed in, or given the choice to.

I realise this is low priority, but it is still a problem.

Status as of Feb-2022: YouTube issue is not a Firefox issue. They are doing user agent detection that only works in Chrome. A Chrome engineer has opened a YouTube bug with them. It is possible to work around this using Ublock

┆Issue is synchronized with this Jira Task

github-monkey commented 3 years ago

I don't have uBlock but AdGuard AdBlocker, which doesn't accept the custom filter as provided earlier in this thread.

Addendum: Installed uBlock, deactivated AdBlocker. Custom filter now accepted but issue unchanged.

github-monkey commented 3 years ago

Addendum: I just noticed this only happens on my tablet, not on my phone. The tablet YouTube UI for Firefox for Android uses a different design than for phones. On my phone, the interface is the same as it is for Chrome and DuckDuckGo: just a thin white timeline along the bottom of the screen and the Previous, Play/Pause and Next controls appear on the middle of the screen when you touch the display. The UI for tablet has a much thicker timeline above the usual playback controls along the bottom of the screen.

github-monkey commented 3 years ago

Addendum:

Youtube on phone: Screenshot_20210425-035313

Youtube on tablet: sketch1619315496597

Matthew-Jenkins commented 3 years ago

Team,

I started to get hit by this. I use my phone in desktop mode and youtube in desktop mode. The above ublock filter was a good starting point for me but I think this is as good as it gets for my use:

m.youtube.com##.html5-video-player :style(max-height: 100vh !important)
youtube.com##player-container :style(max-height: 100vh !important)

the above seems to get everything where it should be regardless of me using the desktop site or not, captions or not or wide mode or not.

N3tFX commented 3 years ago

With the latest version of Firefox now the timeline appears to be in the correct place, when in full-screen, that is only for the visual part of it. The actual timeline where it actually response to touch input is still enlarged and of the screen. This happens to the desktop version of YouTube. If I ask Firefox to show the desktop version of YouTube, play a video in full-screen and drag the video to the left and up, I am able to touch the actual timeline (although I am searching for it in the blind). This happens if I play the video putting it in full-screen while holding the tablet horizontally. And a side effect with this is that when exiting full-screen the site is zoomed in.

But if I put the video in full-screen while holding the tablet vertically this is what happens: The video goes full-screen but in horizontal orientation even though I am holding the tablet vertically. The timeline appears in the correct position AND works as it should!!! After exiting full-screen the site IS NOT zoomed in as in the case of going full-screen from holding the tablet horizontally.

Something is still wrong when going full-screen while holding the tablet horizontally.

Morodar commented 3 years ago 
m.youtube.com##.html5-video-player :style(max-height: 100vh !important)
youtube.com##player-container :style(max-height: 100vh !important)

This did not work out on my OnePlus 6 (2280px x 1080px). The bottom part was missing. After testing, I came up with this CSS code for uBlock:

m.youtube.com##video:style(max-height: 415px !important;)

It limits the max height of the video element on m.youtube.com pages.
This works great for me, hope this might help anyone.

(If this still crops your video, start with lower values like 200px and try to go up until video crops)

It seems like some sort of weird scaling causes the fixing value to be 415px.

sheikh-azharuddin commented 3 years ago

Thanks guys! You guys are amazing!

I personally tweaked the above workarounds into this, and think it's sweet. I'm a CSS noob so please correct me if I'm doing anything in the wrong way.

The below filter could possibly compensate YouTube side video zooming problem and the subtitle misplaced problem at once, with subtitles scrolling remained, for now.

m.youtube.com##.ytp-fullscreen .html5-main-video:style(height: 100vh !important;)
m.youtube.com##.ytp-fullscreen .caption-window:style(position: fixed !important;)

Works perfectly thanks especially the caption in full screen Mozilla or ublock should include this filter by default...

Rodze commented 3 years ago

For me I "fixed" this issue by faking Chrome user agent for Android.

sheikh-azharuddin commented 3 years ago

For me I "fixed" this issue by faking Chrome user agent for Android.

But still that caption is not showing in Fullscreen. .. After applying this fix (ublock filter) it is showing..

OrionRed commented 3 years ago

Fix for Moto g9 Plus: Go to Settings > Display > Advanced > Full Screen > Turn on Firefox

This worked great and is something that will carry over even if I refresh my Firefox on my phone. Even shows the captions correctly.

What I notice is that the "top" of my screen is now white where before it was covered by the oversized player. So now the scaling matches the actual screen size.

jxu commented 3 years ago

Some update to YouTube or Firefox appeared to fix the issue for me a while ago

On Thu, Jul 8, 2021, 1:10 PM OrionRed @.***> wrote:

Fix for Moto g9 Plus: Go to Settings > Display > Advanced > Full Screen > Turn on Firefox

This worked great and is something that will carry over even if I refresh my Firefox on my phone. Even shows the captions correctly.

What I notice is that the "top" of my screen is now white where before it was covered by the oversized player. So now the scaling matches the actual screen size.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mozilla-mobile/fenix/issues/8252#issuecomment-876605125, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB46VXXC3A6Z4WNZUVDO3DTTWXLZDANCNFSM4KR64JVQ .

yaomtc commented 3 years ago

Has anyone fixed or worked around this on Vimeo?

EDIT: I have since unsubscribed

BloodRaven0 commented 3 years ago

@yaomtc I can confirm that I don't experience the bug anymore in Youtube and some... sites that require private browsing. I just tried on Vimeo however, and the bug is still there. For the time being, I guess you can use the Vimeo app, until it is fixed.

RC-3 commented 2 years ago

Still broken. Observed on YouTube video with a 4:3 aspect on a phone (Pixel) with a 20:9 aspect. The video fills from the left to right edge, cropping off the bottom half.
Tested with FF Android 96.3.1, FF Focus Android 96.3.1, and FF Nightly Android 98.0a1. Works on Chrome for Android.

Workaround: create a custom addon collection with a User Agent switcher addon. Import the collection to FF Nightly Android. Change UA to Chrome for Android. Now fullscreen works properly.

joshtriplett commented 2 years ago

I can confirm that as well. Widescreen videos seem to work, but 4:3 videos or other videos with unusual aspect ratios don't.

karlcow commented 2 years ago

Maybe related https://bugzilla.mozilla.org/show_bug.cgi?id=1754802

acalarch commented 2 years ago

I am using the CSS below to fix the problem using uBlock. It pins the video to the top of the screen, scales it to be as large as possible. I find the other CSS style for the player container is not needed. I've made this change on other websites as well. 99% of the time you only have to change the domain. Typically video works as a selector. If it doesn't you can use a PC to visit the mobile website and figure out what selector you need.

m.youtube.com##video:style(max-height: 100% !important; position: fixed !important; top: 0px !important) As youtube changes, I have had to adjust this CSS filter a few times. Specifically Linus Tech Tips on youtube seems to be a good way to test.

Note: this "breaks" non-full screen and I cannot get the :fullscreen selector to work in uBlock. If you manage to get the fullscreen selector to work.. this fix shouldn't break normal youtube. For now I always go full screen.

ComfortableEast commented 2 years ago

m.youtube.com##.html5-video-player :style(max-height: 100vh !important) youtube.com##player-container :style(max-height: 100vh !important)



the above seems to get everything where it should be regardless of me using the desktop site or not, captions or not or wide mode or not.

It is not working for me. Could you please help. After setting up the filter when I tap the fullscreen button 🔳 while on potrait mode -> it still crops out the bottom 10% of the screen. But if I do the same while already being on landscape mode it does work. Now I don't know if this is due to the filter or not because I haven't used mobile yt site on landscape mode before. The 2 ways that work me for in the 1st scenario is (this was working for me before setting up the filter)

  1. After going full-screen, I swipe down to see notification and swipe up. This corrects everything somehow
  2. After going full-screen I select a video quality menu from the top right setting button without actually choosing anything and getting back to the video.

I made sure that ublock origin has "my filters" ticked on I don't know if other add-on I have could possibly interact with it.. (I'm also using sponsor block) Any suggestion would be very helpful thank you!

ZagButNoZig commented 2 years ago

@RByers Sorry to bother you. Do we have any updates for this? The issue is still present on my Galaxy S20 FE

no-identd commented 1 year ago

So, I wonder:

@AlexEastwood can you install some variant of Firefox you haven't ever installed before yet on that phone (e.g. nightly) and check whether that fresh install defaults to that setting (which in this case you couldn't have had preconfigured from any previous install), or whether it installs with it defaulting to on nowadays?

no-identd commented 1 year ago

Reason I ask is because I have a notchless ultrawide phone and so I don't have most of the issues here but something feels off about the aspect ratio on certain video streaming platforms but I can't say for certain whether it's my imagination or not, so I ran into this open issue and went through the various fixes proposed here, which doesn't seem to have changed anything (but also, my possible symptoms, if indeed they are symptoms, aren't QUITE the same as anyone else's here), but I found that at least Firefox Beta on my phone auto defaulted to having that setting turned on already

no-identd commented 1 year ago

As far as I can tell all possibly related bugzilla bug entries have gotten fixed recently. The only possible outstanding one I could see consists of https://bugzilla.mozilla.org/show_bug.cgi?id=1007286 but that one doesn't really count for the purposes of this issue I'd claim.

Does anyone here still experience any symptoms, and if so, which?

(BESIDES YouTube)

gabrielluong commented 1 year ago

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1813883

Change performed by the Move to Bugzilla add-on.