crunchyroll-large-video-player.user.css

/* ==UserStyle==
@name           Crunchyroll large/responsive video player - 1/25/2020, 4:32:28 PM
@namespace      github.com/eramdam
@version        1.0.0
@description    What the title says
@author         Damien Erambert (Eramdam)
==/UserStyle== */

@-moz-document regexp("https://www.crunchyroll.com/[a-z-]+/episode-[a-z-0-9]+") {
#template_container {
    width: 90vw !important;
    /* Feel free to adjust this however you like. */
    max-width: 1400px !important;
}

#showmedia_video_box_wide {
    position: relative;
    width: 100%;
    height: auto;
}

.wide-player-container-16-9::before {
    padding-bottom: calc(100% / (16/9));
}

#showmedia_video_box_wide::before {
    content: '';
    display: block;
}

#showmedia_video_box_wide > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
}