Mini player does not scale correctly

[yioannides]

Hello, thank you for your great extension.

Just wanted to report that the mini player does not scale correctly when scrolling down the page. It is zoomed in the upper left corner as seen in the screenshots below:

I followed the guidelines prior to reporting this bug. I'm on Firefox 133.0.3 (flatpak) on Fedora Linux 41.

Thank you!

[soulhotel]

• Scaling breaks when video is in default viewer / Not when it is in Theater Mode
• Scaling breaks when the Window surpasses 1080p resolution

It can be adjusted through the CSS - for all resolutions while keeping a consistent size no matter if default view or theater view.

Code Snippet In Here

/*
Extensions height width are 225/400
I'm using 366/650 for visibility
*/


html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) #movie_player {
    top: unset !important;
    left: unset !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 650px !important; /*400px*/
    height: 366px !important; /*225px*/
    z-index: 9998 !important;
}
/*
these are being overwritten inline by yt,
important tags fix it but they may need to be
applied and de-applied for when the mini player is triggered
*/


html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) .video-stream.html5-main-video {
    top: unset !important;
    left: unset !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 650px !important; /*400px*/
    height: auto !important; /*225px*/
    position: fixed !important;
    z-index: 9999 !important;
}
/*
height and width should technically match #movie_player
important tags to applied only when the mini player is triggered
position `fixed` (inside of the movie player) instead of `absolute`
*/

html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) .ytp-chrome-bottom {
    width: 97% !important;
}
/*
progress bar container width (set inline) needs to be overwritten to fit mini-player size.
*/

https://github.com/user-attachments/assets/e698aed2-6796-4911-9d38-e041a685f2da

[DaveyJake]

Just wanted to report that the mini player does not scale correctly when scrolling down the page.

I'm also experiencing the same issue. I'll try to implement the CSS solution posted by @soulhotel tomorrow night.

[soulhotel]

For what its worth, I've been using this solution for the past 3 months with 0 issue.

[ynot01]

It can be adjusted through the CSS - for all resolutions while keeping a consistent size no matter if default view or theater view. Code Snippet In Here

Userscript

// ==UserScript==
// @name        Fix iridium miniplayer
// @match       https://www.youtube.com/*
// @match       https://youtu.be/*
// @grant       GM_addStyle
// @run-at      document-start
// @version     1.0.0
// @author      soulhotel/ynot01
// @description https://github.com/ParticleCore/Iridium/issues/1008
// ==/UserScript==

GM_addStyle(`
html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) #movie_player {
    top: unset !important;
    left: unset !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 650px !important; /*400px*/
    height: 366px !important; /*225px*/
    z-index: 9998 !important;
}
html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) .video-stream.html5-main-video {
    top: unset !important;
    left: unset !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 650px !important; /*400px*/
    height: auto !important; /*225px*/
    position: fixed !important;
    z-index: 9999 !important;
}
html[always-visible-player]:not(:has(ytd-watch-flexy[fullscreen])) .ytp-chrome-bottom {
    width: 97% !important;
}
`);