How to force YouTube to use Expanded View by default (and even larger)

Attention!

Google has updated the HTML and CSS of YouTube several times since this post was written, so please check out the latest update below (currently 21-feb-2014).


Introduction

So, the default size of the video player on YouTube is quite small. I know, right?

Expanded view is much better. Tell me about it!

But why doesn’t the damn website remember you switching to expanded view yesterday? Because it just doesn’t offer the functionality.

I am about to change that and rock your world.

The solution: User CSS

Just create a file called youtube.com.css, or something like that, and put this code in it:

div#watch-player.flash-player,
/* to enlarge the playlist's top bar */
.watch7-playlist-bar { 
	width: 1360px !important;
}

/* to enlarge the video player */
#player-api {
	height: 795px !important;
	width: 1360px !important;
}

/* to let the suggested and related videos
   stick to the right hand side, making
   room for the playlist's sidebar */
div#watch7-sidebar {
	margin-top: 10px !important;
	
	/* width of player minus 400px */
	margin-left: 960px !important;
}

/* to move the playlist's sidebar to
   beneath the video player */
div.watch7-playlist-bar {
	position: relative !important;
}
div.watch7-playlist-bar-right {
	position: absolute !important;
	top: 854px !important;
	left: 650px !important;
}

To elaborate on those values:

854 x 510 pixels is the default size of YouTube’s Expanded View
970 x 580 pixels is the full width of the YouTube website
1280 x 765 pixels is true 720p size and will load videos at 720p by default, because of the player’s size, ZOMG!

You can (un)comment any set of values you like, or choose your own. Be sure not to make it bigger than your screen is capable of showing, because that would be a waste.

As for putting this file to use on the YouTube website, I refer to the internet.

Some visual examples

(because people’s attention span isn’t getting any better any time soon, they may even have stopped reading after the first sentence – not because I’m a bad writer, oh no):

The video player at default size

The video player at default size

The video player set to Expanded View

The video player set to Expanded View

The video player at full website width

The video player at full website width

The video player at full 720p width

The video player at full 720p width


Update on 30-oct-2012 (new YT website)

Since they did a complete overhaul of their website (see the picture below for what it looks like), my current CSS is unusable. That’s why I made new CSS code:

/* this is to resize the video player */
#watch7-video, #watch7-main, .watch7-playlist-bar { 
    width: 1360px /*1665px*/ !important;
    /* use first value if you moved the
       playlist to beneath the video player,
       else use the second value */
}
#watch7-player {
    height: 795px !important;
    width: 1360px !important;
}
#watch7-playlist-tray-container { 
    height: 795px !important;
}
div#watch7-sidebar {
    margin-top: 10px !important;
}
 
/* this is to move the playlist from the right
   of the video player to beneath it, 
   left of the "similar videos" column */
div.watch7-playlist-bar {
    position: relative !important;
}
div.watch7-playlist-bar-right {
    position: absolute !important;
    top: 854px !important;
    left: 650px !important;
}

This setting is set to use as much screen width as possible on a 1680×1050 resolution screen, but not everyone uses a screen with this resolution, so here some other valid combinations of values:

  • 1280px width & 750px height (720px + 30px for the player’s progress bar)
  • 960px width & 570px height (540px + 30px for the player’s progress bar)
  • 720px width & 435px height (405px + 30px for the player’s progress bar)

This new code is to accommodate the new YouTube website, but I noticed that it’s only visible by default when using Opera. I didn’t figure out yet how to enable it in other browsers. To see what the new website looks like, here is a screenshot:

The new YouTube website

Update on 16-dec-2012 (some changes on YT)

They changed some of the IDs to Classes, which made the playlist appear on top of the video player. This is fixed in the above code.


Update on 24-mar-2013 (again some changes on YT)

The biggest issue was the change of HTML element ID of the player itself, alas breaking the core of my custom CSS. No worries, just use the new code in the code section below.

/* UPDATED ON 24 MARCH 2013 */

/* to enlarge the playlist's top bar */
.watch7-playlist-bar { 
	width: 1360px !important;
}

/* to enlarge the video player */
#player-api {
	height: 795px !important;
	width: 1360px !important;
}

/* to match the playlist's height
   to the videoplayer */
#watch7-playlist-tray-container { 
    height: 795px !important;
}

/* to let the suggested and related videos
   stick to the right hand side, making
   room for the playlist's sidebar */
div#watch7-sidebar {
	margin-top: 10px !important;
	
	/* width of player minus 400px */
	margin-left: 960px !important;
}

/* to move the playlist's sidebar to
   beneath the video player */
div.watch7-playlist-bar {
	position: relative !important;
}
div.watch7-playlist-bar-right {
	position: absolute !important;
	top: 854px !important;
	left: 650px !important;
}

Thank you, dear readers, for pointing out the issue.


Update on 17-aug-2013 (again changed code)

*Durrrrr* “Hey, it’s working now, but that doesn’t mean we shouldn’t try breaking it!”
— some guys at YouTube

This time the nastiest bit was figuring out why the playlist would not show. It turned out to be the opacity.

Unfortunately the opacity property wasn’t listed as being “used” (read: “set” in the CSS code) in Dragonfly, so I had to check out the tab listing the script-and-markup errors to see what might have gone wrong with the playlist – among other things… more than 500 errors according to Dragonfly. Doing well, YouTube, really. Anyway, I then stumbled upon some voodoo with opacity that sparked the idea and Bob’s your uncle.

Alas, you aren’t here to read my life story but to get working CSS code. So enjoy.

/* UPDATED ON 17 AUG 2013 */

/* set the playlist's top bar
   to a slimmer height */
div.watch7-playlist-bar,
div.watch7-playlist-bar-secondary-controls,
div#watch7-playlist-bar-controls,
div.watch7-playlist-bar-left {
	height: 20px !important;
	line-height: 20px !important;
}
.watch-playlist #player {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.watch7-playlist-bar-left {
	width: 1149px !important;
	/* width of player minus 275px for
	   playlist controls on the right */
}

/* to enlarge the playlist's top bar */
.watch7-playlist-bar { 
	width: 1424px !important;
}

/* to enlarge the video player */
.player-width {
	width: 1424px !important;
}
.player-height {
	height: 831px !important;
}

/* set playlist height to arbitrary
   but useful value */
#watch7-playlist-tray-container { 
    height: 1500px !important;
}

/* to let the suggested and related videos
   stick to the right hand side, making
   room for the playlist's sidebar */
div#watch7-sidebar {
	margin-top: 10px !important;
	
	/* width of player minus 400px */
	margin-left: 1024px !important;
}

/* to move the playlist's sidebar to
   beneath the video player */
div#watch7-playlist-tray-container {
	position: absolute !important;
	
	/* video player height */
	top: 831px !important;
	
	/* video player width minus 710px */
	left: 714px !important;
}

/* to fix the playlist being hidden
   because of low opacity */
div#playlist-tray-legacy * {
	opacity: 1 !important;
}

Update on 17-nov-2013

Another fix for some minor issues, especially playlist alignment related.

/* UPDATED ON 17 NOV 2013 */
div#yt-masthead-container {
	padding: 0 !important;
}
div#page {
	padding-top: 0 !important;
}

/* set the playlist's top bar
   to a slimmer height */
div.watch7-playlist-bar,
div.watch7-playlist-bar-secondary-controls,
div#watch7-playlist-bar-controls,
div.watch7-playlist-bar-left {
	height: 20px !important;
	line-height: 20px !important;
}
.watch-playlist #player {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.watch7-playlist-bar-left {
	width: 1024px !important;
	/* width of player minus 400px for
	   playlist controls on the right */
}

/* to enlarge the playlist's top bar */
.watch7-playlist-bar { 
	width: 1424px !important;
}

/* to enlarge the video player */
.player-width {
	width: 1424px !important;
}
.player-height {
	height: 831px !important;
}

/* set playlist height to arbitrary
   but useful value */
#watch7-playlist-tray-container { 
    height: 1500px !important;
}

/* to let the suggested and related videos
   stick to the right hand side, making
   room for the playlist's sidebar */
div#watch7-sidebar {
	margin-top: 10px !important;
	
	/* width of player minus 400px */
	margin-left: 1024px !important;
}

/* to move the playlist's sidebar to
   beneath the video player */
div#watch7-playlist-tray-container {
	position: absolute !important;
	
	/* video player height plus 20px */
	top: 851px !important;
	
	/* video player width minus 510px */
	left: 914px !important;
}

/* to fix the playlist being hidden
   because of low opacity */
div#playlist-tray-legacy * {
	opacity: 1 !important;
}

Update on 21-feb-2014

Fixed until Google decides to use the hammer again.

/* UPDATED ON 21 FEB 2014 */

/* create more room on the top of the page */
div#yt-masthead-container {
	padding: 0 !important;
}
div#page {
	padding-top: 0 !important;
}
#masthead-positioner-height-offset { 
	height: 25px !important;
}

/* to enlarge the video player */
#player.watch-small,
#content.content-alignment {
	max-width: 1520px !important;
}
.player-width {
	width: 1520px !important;
}
.player-height {
	height: 885px !important;
}

/* set playlist height to arbitrary
   but useful value */
#watch-appbar-playlist { 
    height: 700px !important;
}
#watch-appbar-playlist .playlist-videos-list {
	/* above value minus 100px for the header */
	max-height: 600px !important;
}

/* to let the suggested and related videos
   stick to the right hand side, making
   room for the playlist's sidebar */
div#watch7-sidebar.watch-sidebar {
	margin-top: 0 !important;
	min-width: 750px !important;
	max-width: 750px !important;
	position: relative !important;
	
	/* width of player minus 750px */
	margin-left: 770px !important;
}
div#watch7-sidebar-contents.watch-sidebar-gutter {
	margin-left: 380px !important;
	width: 350px !important;
}

/* to move the playlist's sidebar to
   beneath the video player */
div#watch-appbar-playlist {
	position: absolute !important;
	width: 350px !important;
	top: 0px !important;
	left: 0px !important;
}

/* to fix the playlist being hidden
   because of low opacity */
div#playlist-tray-legacy * {
	opacity: 1 !important;
}

50 thoughts on “How to force YouTube to use Expanded View by default (and even larger)

  1. This is broken for all videos of a smaller size than the specified though. If I use the 720p and the video has only 480p, the background is 720p while the actual player takes only 380p on youtube.
    What are the lines, to make the player play at the next biggest size? Thanks.

    1. That’s not the case here. I’m using the full 720p width in my CSS.

      I tried videos which have a max of 360p and were playing at 360p. I also tried a video with a max of 480p, that was also playing at 480p in my browser. The same for a video with 720p max. Only when the video has a max of 1080p, 720p would still be selected when using my CSS, that’s the only case where it didn’t choose the highest quality possible.

      I wonder what browser you’re using. I’m using Opera.

  2. Since youtube is now expanding into HTML 5, this new line of code will be necessary to make sure all videos re-size properly: “div#watch-player.html5-player,”

    So the script should look like:

    div#watch-player.flash-player,
    div#watch-player.html5-player,
    div#watch-video {
    width: /*854px*/ 970px /*1280px*/ !important;
    height: /*510px*/ 580px /*755px*/ !important;
    }
    div#watch-sidebar {
    margin-top: 10px !important;
    }
    div#watch-video-container {
    background-color: #555 !important;
    }

    1. That trick is different for each browser. You will have to use “user CSS” or “custom CSS” for this to work, which means that the browser will be using a local CSS stylesheet that will be used on top of the regular website’s stylesheet(s) to be styled like you want it to be.

      Each browser has its own way of applying that “user CSS” or “custom CSS”, so it’s up to you to look that up for your specific browser.

    1. In case of Google Chrome, you can put the relevant CSS code in this file: C:\Users\__username__\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

    1. I edited my post slightly and included a screenshot of the new website.

      The best values to use on a 1080p monitor are the biggest video size you can fit on your screen. Just try a few values and don’t forget to add 30 pixels to the height to accommodate the player’s progress bar.

      For example:
      1680×945 -> 1680px width and 975px height in the CSS code.
      1760×990 -> 1760px width and 1020px height in the CSS code.

      Any higher value might not fit the height of your browser screen, so it’s just looking at what’s best in your own situation.

  3. Hey, thanks for this its so much better than the real deal. Just one thing, my playlist is right on top of my video with your default settings. Ive tried to change the top and left px value here but it didnt do anything. Im using chrome and running 1980×1200 if that changes anything. Thanks!

    div#watch7-playlist-bar-right {
    position: absolute !important;
    top: 795px !important;
    left: 650px !important;
    }

    1. Are you sure you didn’t forget to include this bit?

      div#watch7-playlist-bar {
      position: relative !important;
      }

      Because it is required for the actual playlist to be positioned in an absolute way.

        1. Checked and corrected. Turns out the issue was because of some changes made to New YouTube’s HTML code since it was first launched. Fixed and checked in Opera 12 and Chrome 23.

          Please use the updated code from my article.

  4. Yep, definitely isn’t working anymore, from about 3-4 days ago….
    Have been suffering for all those day, I am so used to the extended view :-P

    Pleeeeaaase fix if possible…

    Thanks!!

  5. Awesome job with this last update! I really love what you’ve done with it :P. Wonder why YouTube hasn’t implemented something like this already. Thanks for keeping this updated. I can’t live without this anymore :D

  6. Hey I really wanted to say thanks for this code, it’s amazingly helpful, and the fact that the day after youtube broke the code that you had new code up is just excellent.

    Thanks so much!

  7. Great Tom!! Thanks a lot!!

    I just need a little help, when I play a PLAYLIST – the buttons Next, Previous, Shuffle does’t work… Do you know how to fix it ?

    Is that pic from the guy from IT Crowd!? Great series!

    Marcelo

  8. For some reason it doesn’t work for me… I’m using Firefox 26.0. I saw that for my browser I have to put the code in the userChrome.css file in:
    C:\Documents and Settings\*username*\Application Data\Mozilla\Firefox\Profiles\*profile name*\chrome
    and put:
    @-moz-document domain(youtube.com)
    {

    in the beginning, and a “}” in the end of the file. I did it, but it didn’t change anything in youtube… I tried changing some of the values to fit my screen resolution too (1024×768), but no matter what I write, it doesn’t change a thing… When I restart the browser and play a video, the video player is small again. Some help, please?

  9. Thanks for these! I’ve been using your css for quite some time.

    In case that the player still isn’t centered for anyone after today’s update. Try adding “margin-left: -332px;” into “.player-width”. That centered it for me.

  10. For me it is fine without the negative left margin.

    That is on Opera 12, just fyi. All CSS I write is for that browser (because that’s the one I use) and I sometimes fail to test thoroughly in other browsers before publishing.

    Another thing, it’d be nice for me to know what the average screen size in pixels is. So please post your screen’s resolution. Because the values used in the published CSS are fit to make the best of the available screen estate using a resolution of 1680×1050, which is my case. I’d imagine other values might be better suited on other resolutions.

  11. They must have updated it again shortly after you updated it. It worked for a half-day and now it’s broke (At least in Chrome). I’m curious if it broke in Opera too?

    1920×1080 user here. I usually tweak the settings anyway. With the updated script, it worked out nicely as the video took up the majority of the screen right to the bottom.

  12. I have had some trouble getting custom CSS to work in Chrome, because apparently they dropped support for the custom.css file since version 32. I am running 33 and it took me a while to figure out why it would not, for the life of me, work at all. But since some hints pointed out what has changed, I was prepared to go the other way: browser plug-ins. I installed Stylish which seems to have received the most ratings, implying (in my mind) popularity and maturity.

    Now on-topic: I have successfully inserted my custom CSS to work with youtube using the Stylish plug-in, and to my great surprise it works just fine. Maybe there is a quirk in support for other resolutions, which is difficult for me to check since I don’t have a FullHD monitor in my vicinity. I’ll try to get it done, though.

  13. This needs to be added to correct the size of html5 videos in Chrome.

    .html5-video-content {
    width: 100%;
    height: 100%;
    }

    .video-stream {
    width: 100%;
    height: 100%;
    }

  14. long story short + html5 video fix

    .player-api {width:1040px !important; height:615px !important}
    .video-stream {width:100% !important; height:100% !important; left:0 !important}
    #watch7-sidebar {margin-top:0 !important}
    .video-annotations {display:none !important}

    goodluk

  15. Flexible player for youtube

    .site-center-aligned #player.watch-small {max-width:90% !important; min-width:20% !important}
    .player-api {width:100% !important; height:0 !important; padding-bottom:60% !important}
    #movie_player {padding-bottom:60% !important; width:100% !important; height:100% !important}
    .video-stream {height:100% !important; width:100% !important; left:0 !important}
    #watch7-sidebar {margin-top:0 !important}

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>