Documentation for "youtube-video-resize-fix"

[D-Rekk]

Hi @cyfung1031 👋 I'm a contributor to a YouTube extension (ImprovedTube) and some months ago I developed a feature to swap the comments and videos sections.

I encountered an annoying bug that made the video appear smaller than the player itself for whatever reason so I did a pretty rudimental code (Observers and inline width)

I'm now using your neat script instead of my temporary solution and I have to admit it's working well. I'm asking if you could add documentation of the script or a brief explanation. As far as I understand this allows the YouTube player to trigger resizeEvent by reading the values of the changed CSS instead of the native one. Also, if you don't mind, let's connect on Discord 🥹 (I'm D_Rekk there)

[cyfung1031]

@D-Rekk I don't use Discord sorry.

There are two methods provided by the ytd-watch-flexy's controller.

• calculateNormalPlayerSize_
• calculateCurrentPlayerSize_

They will give the sizes (width & height as a array) for the player element in normal mode and theater mode.

The resize event will finally trigger the onWindowResized_ method in the controller which is the entry point for the player to resize.

What this script does

• Resize the player (by triggering onWindowResized_) whenever there is resize of player container, video loaded, chatroom expand/collapse, etc.
• Change the implementation of calculateNormalPlayerSize_ and calculateCurrentPlayerSize_

Why it is necessary

• If you just change the size of the player, by CSS or whatever, the progress control bar will not be sized correctly.
• There are multiple DOM layers for the video player, with the complex css layout construction. I believe YouTube engineers have no other choice so they made calculateNormalPlayerSize_ and calculateCurrentPlayerSize_ instead of auto sizing (responsive design) by css.

[cyfung1031]

You better check the js implementation in youtube/js&css/web-accessible/functions.js of ImprovedYouTube.

For example, calculateNormalPlayerSize_ = calculateCurrentPlayerSize_ shall be incorrect. calculateCurrentPlayerSize_ shall be always [NaN, NaN] for non-fullscreen.

It uses ImprovedTube.elements.player.offsetWidth but I am not sure ImprovedTube.elements.player refers to which layer of the player.

Besides, your implemented resizing might not trigger the onWindowResized_.

[D-Rekk]

Why it is necessary

• If you just change the size of the player, by CSS or whatever, the progress control bar will not be sized correctly.

This is one of the problems I was dealing with. The video itself would resize automatically with some CSS, but the controlBar would not increase (or shrink) its size accordingly.

Thank you again for the explanation.