Twitch-like fullscreen video with chat and/or comments on the right
Actual Theater Mode for YT by TheCarrotCR
Details
AuthorTheCarrotCR
LicenseNo License
Categoryyoutube.com
Created
Updated
Code size5.0 kB
Code checksumdf08e0d
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
I was tired of YT's so-called "theater mode" bs and made this CSS for myself, so you can use it if you want.
Don't mind purple bar on screenshot as it's just other styling for myself which is not present for this style.
UPD v1.1.0:
- fixed video title never being shown as it's not needed for Theater Mode in original YT design. Now title acts like it does for Fullscreen mode, it's hidden when cursor leaves video frame or not moving and visible when cursor moving over video or it's paused;
- added a new feature that displays comments on the right chat-alike if chat is not present or hidden.
Kinda amazed about how much could be done easily without even any javascript.
UPD v.1.1.1:
- couple of small fixes: extra bottom padding for comments so the last comment wouldn't be hidden under "write a comment" block, an attempt to fix comments block having a horizontal scroll (not sure if it will work on Chromium browsers).
Source code
/* ==UserStyle==
@name Actual Theater Mode for YT
@namespace youtube.com
@version 1.1.1
@description Twitch-like fullscreen video and chat
@author TheCarrotCR
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* remove topbar and make video frame full-size in theater mode */
ytd-watch-flexy[full-bleed-player] #full-bleed-container.ytd-watch-flexy {
max-height: calc(100vh - 1px);
}
ytd-masthead[theater] {
display: none !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]) {
--ytd-toolbar-height: 0px;
--ytd-masthead-height: 0px;
}
/* chat fix */
ytd-live-chat-frame#chat:not(#secondary *> #chat) {
top: 0 !important;
border-radius: 0;
}
/* fix to display video title fullscreen-like */
ytd-page-manager:has(ytd-watch-flexy[theater]) .ytp-chrome-top {
height: auto !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]) .ytp-title {
display: -webkit-box !important;
display: -webkit-flex !important;
display: flex !important;
}
/* comments on the right side when there's no chat */
html {
--video-size-theater-custom: 80%; /* for my 21:9 display I've set 80/20 video to comments proportion so you can tweak it here */
--chat-size-theater-custom: calc(100% - var(--video-size-theater-custom));
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] {
display: flex !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #full-bleed-container.ytd-watch-flexy:not(ytd-live-chat-frame .ytd-watch-flexy) {
min-width: var(--video-size-theater-custom) !important;
max-width: 100% !important;
max-height: calc(100vh - 1px) !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #single-column-container {
display: none !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns {
border-left: 1px solid rgba(255,255,255,0.2);
display: flex !important;
max-width: var(--chat-size-theater-custom) !important;
max-height: calc(100vh - 1px) !important;
overflow: scroll;
margin: 0 !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary {
max-width: calc(100% - 30px) !important;
margin-left: 14px !important;
min-width: calc(100% - 30px) !important;
margin-right: 14px !important;
padding: 0 !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary #title {
display: none !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary ytd-video-owner-renderer #upload-info {
display: none !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary #comments {
max-height: calc(100vh - 1px) !important;
padding-bottom: 256px !important;
}
#columns #primary #above-the-fold #description {
min-width: -webkit-fill-available !important;
min-width: -moz-available !important;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary #comments #header.ytd-item-section-renderer {
position: fixed;
bottom: 0;
background: var(--yt-live-chat-action-panel-background-color);
z-index: 10;
width: calc(var(--chat-size-theater-custom) - 28px);
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #primary #comments #contents {
overflow: scroll;
}
ytd-page-manager:has(ytd-watch-flexy[theater]):not(ytd-page-manager:has(ytd-live-chat-frame#chat:not(#secondary *> #chat))) ytd-watch-flexy[theater] #columns #secondary {
display: none !important;
}
}