[Bug]: Playing video in incorrect ratio

[Rairof]

Preflight Checklist

• I use the latest version of YouTube Music (Application).
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.
• I understand that th-ch/youtube-music has NO affiliation with Google or YouTube

YouTube Music (Application) Version

3.5.3

Checklists

• I use the portable version of the YouTube Music Application.
• I can reproduce this issue in the official version of (WEB) YTM.

What operating system are you using?

Windows

Operating System Version

Win 11 Pro

What CPU architecture are you using?

x64

Last Known Working YouTube Music (Application) version

N/A

Reproduction steps

1. Play any music video
2. Toggle to video mode

Expected Behavior

Video plays at correct ratio covering the whole space

Actual Behavior

Video plays at top left in a small ratio

Enabled plugins

1. Ad Blocker
2. Album Actions
3. Album Color Scheme Color mix ratio- 50%
4. Ambient Mode-
   Smoothness transition- During 1.5s
   Quality- 50 pixels
   Size- 100%
   Buffer- 30
   Opacity- 100%
   Blur amount- 100 pixels
5. Blur Navigation Bar
6. Bypass Age Restrictions
7. Discord Rich Presence-
   ✓ Auto reconnect
   ✓ Clear activity after timeout
   ✓ Play on YouTube Music
   ✓ Hide GitHub link Button
8. Downloader
9. In-App Menu
10. Lyrics Genius
    ✓ Romanized Lyrics
11. Music Together [Beta]
12. Navigation
13. Precise Volume
    ✓ Local Arrow-keys Controls
14. Skip Disliked Songs
15. Synced Lyrics
    ✓ Make the lyrics perfectly synced
    Line effect- Scale
    Default character between lyrics- ♪
    ✓ Show lyrics even if inexact
16. Taskbar Media Control
17. Video Quality Changer
18. Video Toggle-
    Mode- Native toggle
    Alignment- Left

Additional Information

It's inconsistent and sometimes works and sometimes doesn't work. Not sure why, maybe its something to do with video playback fetching or type of music video?

[h-banii]

On linux (wayland), I managed to reproduce this bug reliably with these steps:

• Reduce window size
• Toggle it to "song"
• Increase window size
• Toggle it back to "video"

I ran these lines from the video-toggle plugin in my browser and managed to reproduce the issue in the official web version too.

youtube-music/src/plugins/video-toggle/index.ts

Lines 125 to 133 in 4c2cb8d

	case 'native': {
	document
	.querySelector('ytmusic-player-page')
	?.setAttribute('has-av-switcher', '');
	document
	.querySelector('ytmusic-player')
	?.setAttribute('has-av-switcher', '');
	return;
	}

Video demo (in the music.youtube web version)

youtube-music.mp4

I'm not sure if this behaviour is present when using an actual premium subscription (I don't have one, so I can't test it).

---

OBS.: as a quick workaround, triggering the window resize event seems to fix it (using the native toggle)

document
  .querySelector('button.video-button.ytmusic-av-toggle')
  .addEventListener('click', () => window.dispatchEvent(new Event('resize')))

[JellyBrick]

I'm not sure if this behaviour is present when using an actual premium subscription (I don't have one, so I can't test it).

2024-10-14 UPDATE: reproducible (with premium subscription)

[JellyBrick]

fixed at 5ca6653

Thanks to @h-banii!

[h-banii]

I found a way to trigger this bug without the song/video toggle. It happens in the official web version too.

Video scale too small:

1) start with the left drawer open	2) close the drawer

Video scale too big:

1) start with the left drawer closed	2) open the drawer

The container's dimensions get updated correctly (outlined in red), but the video doesn't.

[Rairof]

I tried with official ytm in site but it didn't triggered for me so I reported.
I guess it was a combination of both the mod and ytm bug then?

[h-banii]

Here's a css workaround for this issue

.html5-video-container, .html5-main-video {
  width: 100% !important;
  height: 100% !important;
}
.html5-main-video {
  top: unset !important;
  left: unset !important;
  object-fit: contain !important;
}

quick explanation

youtube manually calculates the video's width, height, top, left anytime the window resizes, so we need to overwrite those.

• the container's dimensions (#movie_player) are updated correctly, so width and height are set to 100%

• top and left need to be unset to fix the position of videos with aspect ratios that are not 16:9

• object-fit needs to be contain because youtube uses cover by default, which clips wide videos like
  "Thought Crime" by yorushika https://www.youtube.com/watch?v=ENcnYh79dUY