Change Youtube's player size with custom css

On my screen, the medium size for youtube videos is quite small. The video player could use the available space more efficiently. By adding a custom stylesheet file to your browser, you can declare custom css rules for a specific website. On Firefox, this file is called userContent.css located at %APPDATA%/Mozilla/Firefox/Profiles/*.default/chrome/userContent.css (create if not found). But this is for firefox specifically, so be sure to check for your browser.

If you want to change the size of the medium player use this code:

@-moz-document domain(youtube.com) {
    #watch-video.medium, #watch-video.medium #watch-player {
        height: 765px !important;
        width: 1280px !important;
    }
}

You can also replace the both players and use 1 default size:

@-moz-document domain(youtube.com) {
    #watch-video, #watch-video #watch-player {
        height: 765px !important;
        width: 1280px !important;
    }

    #watch-sidebar {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    #watch-video-container {
        background-image: -moz-linear-gradient(center top , #555555, #333333) !important;
    }
}

This is how it shoud look like:

Inspired by: http://blog.hawn.be/2011/10/07/how-to-force-youtube-to-use-expanded-view-by-default-and-even-larger/

Leave your comment



@tmdpw Dat doe ik ook hoor :p