How to fix YouTube theater mode

works in 2025

If you want a true fullscreen theater mode on YouTube, check out my Chrome extension: https://getbettertube.com/

---

There is a theater mode in YouTube, but I find it annoying that it doesn’t stretch the video to fill the viewport, leaving plenty of screen real estate unused:

I found a couple of ways in which it can be fixed to get a true windowed fullscreen mode.

The Extension Solution

For Safari, there is an extension called “Master for Youtube” (yes, Youtube, not YouTube) which, among other features, allows to expand the video player to the full width of the screen. However, their website is not functioning properly (with numerous strange redirects). The last update was over a year ago, and overall, it does not appear to be reliable. Anyway, if you are a risk-taker, here is the App Store link to download the Safari extension.

For Chrome (and other Chromium-based browsers), there is another extension called “Enhancer for YouTube” which adds plenty of features and extra controls. It also allows you to expand the video player. One minor drawback for me is that the windowed fullscreen mode doesn’t hide the navigation bar with the logo and the search box, resulting in the full viewport not being fully utilized:

There are also minor bugs and glitches, so my experience with the extension wasn’t good. If you want to try it out, here’s the link to the extension in Chrome Web Store.

The Custom Solution

Personally, I prefer to minimize the number of apps and extensions I use, so I developed a custom tweak.

YouTube features a so-called theater mode. However, I find it somewhat odd due to the bulky black bars on both sides and the limited height of the video, which isn’t 100%. Thankfully, we can adjust it with pure CSS. To achieve the perfect windowed fullscreen mode, we simply need to stretch the video vertically to eliminate of the black bars, and then hide the top menu bar where the logo and search box are located. Here’s the CSS code to do it:

ytd-watch-flexy[theater]:not([fullscreen]) #full-bleed-container {
	height: 100vh !important;
	max-height: none !important;
	margin-top: -56px !important;
	z-index: 9999 !important;
}

Since I originally posted this article, YouTube has changed the HTML markup several times, resulting in my CSS tweak no longer working. As of right now (December 2023), it works perfectly on Safari 17.0, macOS Sonoma 14.0. It should also work in other browsers. If it doesn’t, please let me know.

To implement these changes in Safari I personally use Cascadea, a paid app that allows for custom styling and has iCloud sync, which is handy if you use Safari on multiple macs. Alternatively, you can create a CSS file with the code and manually add it through Safari’s preferences:

It will be loaded on every page of every website, so it isn’t ideal, but it will work and since we are using quite specific CSS selectors, no conflicts should occur.

For Chrome and other browsers, there are numerous extensions similar to Cascadea, as well as built-in features in some browsers, such as the “Boosts” feature in Arc. By the way if you are using Arc, here’s the link to my Boost with the CSS tweak.

How it works

All my code does is it simply changes the behavior of YouTube’s theater mode. To enable windowed fullscreen mode, simply press T or enable theater mode from the control bar beneath the video:

Perfection.