Quick and dirty clone of how twitch does its theater mode for youtube livestreams
because youtube is youtube I've rewritten most of it
twitchtube by izuthree
Details
Authorizuthree
LicenseNo License
Categoryyoutube.com
Created
Updated
Size3.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Updated it to behave a bit nicer and actually respect when a video doesn't have a chat box, as well as it now won't by default kick into twitch-like view when it's a chat replay, unless you click to activate it
Otherwise by default being in theater mode will display the video full screen until you turn off theater mode
It's a personal thing I made mostly for myself for my ridiculous screen layout stuff and might break etc, but feel free to just do whatever with this sloppy CSS to mess with things however you want
Also because youtube is youtube, sometimes you might need to resize the window by like 1px before it behaves and correctly scales the video, though that should only be an issue when you first activate/deactivate the CSS.
Source code
/* ==UserStyle==
@name twitchtube
@version 2023.08.15.3
@namespace ?
==/UserStyle== */
@-moz-document regexp(".*(youtube.com/watch).*") {
#page-manager:has(ytd-watch-flexy[theater]){max-height:100vh!important;overflow:hidden!important;margin-top:0px!important;}
html{overflow-y:auto!important;}
#content:has([theater]) #masthead-container{
position:fixed!important;
top:-30px!important;
transition:top 0.2s ease-in-out,opacity 0.2s ease-in-out!important;
opacity:0;
}
#content:has([theater]) #masthead-container:hover{
transition:top 0.2s ease-in-out,opacity 0.2s ease-in-out!important;
top:0px!important;
opacity:1!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #player-theater-container{
position:fixed!important;
top:0px;
height:100vh!important;
width:calc(100% - 330px)!important;
z-index:9999;
bottom:0!important;
max-height:100vh!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #chatframe{
position:fixed!important;
top:0px;
right:0;
width:330px;
height:100%;
z-index:9999!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #columns{
position:relative;
top:100vh;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #chat{height:0px!important;padding:0!important;margin:0!important;min-height:0!important;}
ytd-watch-flexy[should-collapse-donation-shelf] #masthead-container{z-index:20!important;}
ytd-watch-flexy[should-collapse-donation-shelf][theater] video{
top:0!important;bottom:0!important;margin:auto!important;
}ytd-watch-flexy[should-collapse-donation-shelf][theater] .html5-video-container{
height:100%!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #player-wide-container{
max-height:100vh!important;
height:100vh!important;
width:calc(100vw - 330px)!important;
}
#content:not(:has(#chatframe)) [theater] #player-wide-container,
#content:has([aria-label="Show chat"]) [theater] #player-wide-container,
#content:has([aria-label="Show chat replay"]) [theater] #player-wide-container{
width:100vw!important;
min-width:100vw!important;
height:100vh!important;
max-height:100vh!important;
position:relative;
}
.ytp-offline-slate-background{
background-size:contain!important;
background-repeat:no-repeat!important;
background-color:black!important;
}
@media (max-width: 1350px) or (max-height:500px) {
ytd-watch-flexy[should-collapse-donation-shelf][theater] #player-theater-container{
height:calc(100vh - 500px)!important;
width:100%!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #chatframe{
width:100%!important;
height:calc(100vh - 56.25vw)!important;
bottom:0px!important;
top:auto!important;
border-radius:0!important;
}
ytd-watch-flexy[should-collapse-donation-shelf][theater] #player-wide-container{
width:100%!important;
height:56.25vw!important;
}
}
}