Resize Video To Window Size

Resize the video player for various sites to the window size.

< Feedback on Resize Video To Window Size

Review: Good - script works

§
Posted: 30. 01. 2020

The video is too high up on Crunchyroll when the window covers 50% of the screen

Greetings! Any chance you could add an option to make the video sit lower when the browser window covers 50% of the screen? Tried both Chrome and Edge Beta and it's always too high up for me. As it is now, there's a lot of black area at the bottom and none on top. I'd rather have the same size and position as with Improved YouTube.

Two images for demonstration: https://i.vgy.me/3IYhbq.png https://i.vgy.me/dEj9EA.png

ZrenAuthor
§
Posted: 30. 01. 2020

It never really bothered me enough to fix it, since I usually watch anime fullscreen or with a "PictureInPicture" like way.

This wasn't really possible when I first wrote this plugin, but now that I consider it again I can probably do it. CSS flexbox makes vertically centering fairly easy. The iframe/video player has a container div#showmedia_video_box with the .player-container-16-9 class, so I can easily do the math.

9 / 16 = 0.5625, so we can easily add a max-height: 56.25wv to limit the height of the video player to 56.25% of the screen width (keeping the 16/9 ratio).

Then just make everything display: flex, and use align-items: center to vertically center.

Preview: https://i.imgur.com/BcvBwuK.png

Lastly I gotta test an older anime with 4:3 resolution to see if I need to do extra work there.

§
Posted: 30. 01. 2020

Thank you! Looks great!

Also, sorry for posting in the wrong place on GitHub. I blame the lack of anime in my life atm :)

I don't suppose you have a Patreon?

ZrenAuthor
§
Posted: 30. 01. 2020

Uhg, it looks like 4:3 video keeps the player-container-16-9 class. Though it already currrently forces 16:9 already inside the iframe. I still can't add a CSS class that affects inside the iframe... or can I?

https://i.imgur.com/YNEebMq.png

Aha! This works, with 16:9 and 4:3.

// @include         https://static.crunchyroll.com/vilos-v2/web/vilos/player.html

         if (window.location.href == 'https://static.crunchyroll.com/vilos-v2/web/vilos/player.html') {
            GM_addStyle('#vilosRoot { height: 100vh !important; }');
        }

https://i.imgur.com/4Dn5RyU.png

ZrenAuthor
§
Posted: 31. 01. 2020

Try v53.

§
Posted: 31. 01. 2020

Seems to be working really well now! Thanks!

Post reply

Sign in to post a reply.