Resize the video player for various sites to the window size.
< Feedback on Resize Video To Window Size
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.
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?
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; }');
}
Try v53.
Seems to be working really well now! Thanks!
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