YouTube Theatre-mode expanded to fill the viewport. Bigger video player, less clutter, fewer distractions.
YouTube Simple Cinema (Theatre Mode Enhancements) by mac_dizzy
Details
Authormac_dizzy
LicenseNo License
CategoryYouTube
Created
Updated
Size3.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Usage:
Ensure the video player is using Theatre mode.
Compatibility:
Seems to be compatible with browser extension "Enhancer for YouTube" (at least on Firefox/Windows).
CHROMIUM USERS (Brave, Chrome, etc.):
You may benefit from optional style 1: Full Viewport Player
The stylesheet makes some use of scroll-snapping to help further maximize viewport usage (the theory is that the page should 'snap' to certain points when you scroll). While scroll-snapping isn't working 100%, it seems you can click the player (like to pause/play, for example) to horizontally center it. Works in Brave (and I assume other Chromium-based browsers). Does not work in Firefox.
You may also benefit from optional style 2: Eliminate Black Bars. This isn't necessarily for Chromium users specifically - anyone can use it - but because this relies on expanding the video to fill the black bars, some of the top and bottom of the video gets cut off. The bigger the black bars, the more the video needs to be expanded, the more the top and bottom gets cut off. Thus, I don't recommend this if you're not using optional style 1.
Tips:
- If you modify this stylesheet in any way, switch out of and back into theatre mode, or refresh the page, to have your changes take full effect. YouTube's scripts set inline styles that sometimes need to be recalculated.
Changelog
1.1.5
- Bugfix: YouTube seems to use different elements/selectors on different browsers. This fix should fix appearance on chrome-based browsers (tested in Edge and Opera).
1.1.4
- Improvement: Update regex to support URLs with query params other than
v=....
1.1.3
- Bugfix: It seems YouTube is using a different ID on one of the elements this stylesheet targets. Updated to use the new ID.
1.1.2
- Bugfix: It seems YouTube recently tweaked their styles to apply
object-fit: coverto the video element by default, which can lead to a portion of the top and bottom of the video being cut off. This update enforcesobject-fit: containand thus the entire video is visible.
1.1.1
- Bugfix for thumbnails on queued videos.
1.1.0
- BUGFIX: Styles don't fuck with fullscreen mode anymore.
- Refactored some styles to more reliably achieve the intended results with simpler rules. This results in a more consistent experience across browsers.
- Separate optional style rules to their own "section" and describe them more thoroughly.
- Update README.
1.0.2
- Fix for fullscreen mode when
max-height: 100vh;is NOT used.
1.0.1
- Fixed an issue with the moz-document regexp... hopefully.
- The moz-dozument regexp should be:
https?:\/\/(www\.)?youtube.com\/(.+)?watch\?v=(.+)?- copy-paste it into the stylesheet manually if it does not look like that. - The CSS should only be active on video player pages. On other pages, it may break the layout slightly, and rather than addressing that, I just restrict it to video player page.
Source code
/* ==UserStyle==
@name YouTube Simple Cinema
@namespace mac_dizzy
@version 1.1.5
@description Bigger, full-width player for YouTube (use Theatre mode)
@author mac_dizzy
==/UserStyle== */
@-moz-document regexp("https?:\/\/(www\.)?youtube.com\/(.+)?watch(.+)?v=(.+)?") {
:root {
--ysc-masthead-height: 56px;
}
html:not(:fullscreen) #content {
scroll-snap-type: y mandatory;
}
html:not(:fullscreen) #masthead-container.ytd-app {
position: static;
scroll-snap-align: start end;
}
html:not(:fullscreen) #page-manager.ytd-app {
margin-top: 0;
scroll-snap-align: center;
}
html:not(:fullscreen) ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy,
html:not(:fullscreen) ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy {
--ysc-player-height: calc(100vh - var(--ysc-masthead-height));
height: 0;
min-height: 0;
padding-bottom: min(56.25%, var(--ysc-player-height));
max-height: var(--ysc-player-height);
}
html:not(:fullscreen) ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy .html5-video-container,
html:not(:fullscreen) ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy .html5-video-container {
height: 100%;
}
html:not(:fullscreen) ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy video,
html:not(:fullscreen) ytd-watch-flexy[theater] #player-full-bleed-container.ytd-watch-flexy video {
position: relative;
top: unset !important;
left: unset !important;
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.ytp-cued-thumbnail-overlay-image {
z-index: 10;
background-color: black;
background-size: contain;
}
/* The following styles are optional. */
/**
* 1. Full Viewport Player
*
* Set the video player to the height of the browser window's usable area (the viewport).
*
* NOT RECOMMENDED FOR NON-CHROMIUM BROWSERS.
* In Chromium-based browsers, clicking anywhere in the video player is usually enough to center the player horizontally. This does not work in Firefox.
*/
html:not(:fullscreen) ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy {
/*
padding-bottom: min(56.25%, 100vh);
max-height: 100vh;
*/
}
/**
* 2. Eliminate Black Bars
*
* In some window sizes, black bars will be present on either side of the video. This style will expand the video (i.e. zoom in) to fill the video player area. The tradeoff is that some of the top and bottom of the video is no longer visible.
*
* NOT RECOMMENDED IF NOT USING THE STYLE ABOVE.
* The more the video has to be expanded (zoomed in), the more the top and bottom of the video gets cut off.
*/
html:not(:fullscreen) ytd-watch-flexy[theater] #player-wide-container.ytd-watch-flexy video {
/* object-fit: cover; */
}
.ytp-cued-thumbnail-overlay-image {
/* background-size: cover; */
}
}