Make YouTube Live Borderless
Verzia zo dňa
/* ==UserStyle==
@name YouTube Live Borderless
@version 0.5.2
@namespace github.com/cyfung1031
@license MIT
@description Make YouTube Live Borderless
@author CY Fung
@supportURL https://github.com/cyfung1031/YouTube-Live-Borderless/
@compatible edge Edge [Blink] >= 105; Stylus (Beta)
@compatible chrome Chrome >= 105; Stylus (Beta); Chrome 101-104 requires "enable-experimental-web-platform-features"
@compatible firefox FireFox >= 103; Stylus; layout.css.has-selector.enabled = true; note: some features might not be very stable!!
@compatible opera Opera >= 91; Stylus (Beta)
@compatible safari Safari >= 15.4; Stylus
@preprocessor stylus
@var checkbox youtube-wpr "YouTube WPR" 0
@var select mode-for-two-col "Mode ##TwoColumns" {
"Expanded Panel Only #Recommended": "expanded-panel",
"Expanded Live Chat Only": "expanded-live",
"Expandable Live Chat Only": "expandable-live",
"Always": "always"
}
@var select mode-for-single-col "Mode ##SingleColumn" {
"YT Mobile #Recommended": "mobile",
"Normal": "normal",
"Disabled": "disabled"
}
@var checkbox no-masthead "Top.MastheadBar ::Hide" 0
@var number masthead-hoverable-h "Top.MastheadBar ::Hoverable >>>1_alwaysHide" [4, 1, 8, 1]
@var checkbox disable-cinematics "CinematicsEffect ::Disable" 0
@var range video-enlarging "Video.Enlarging >>>Video.Border.Fine.Tune" [0, 0, 8, 2]
@var range video-padding-left-right "Video.Padding.LeftRight (Experimental)" [0, 0, 18, 2, 'px']
@var range video-padding-top-bottom "Video.Padding.TopBottom (Experimental)" [0, 0, 18, 2, 'px']
@var range primary-content-margin "PrimaryContent ::Margin" [24, 6, 48, 6, "px"]
@var range video-title-size "VideoTitle ::Size" [2.0, 1.0, 3.0, 0.2, "rem"]
@var checkbox no-bottom-row "Bottom.PrimaryMetaInfoRow ::Hide" 0
@var range min-below-area "BelowArea ::Minimum >>>10px_disable" [120, 10, 240, 10, 'px']
@var range min-below-area-for-theater "WideTheater.BelowArea ::Minimum >>>10px_disable" [120, 10, 240, 10, 'px']
@var number side-panel-width "SidePanel ::Width" [440, 320, 640, 20, "px"]
@var checkbox no-round-border "RoundBorder ::Disable" 1
@var number chat-zoom-for-right-col "RightCol.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
@var range chat-btn-height "RightCol.Chat ::SpaceAbove@Zoom >>>4px_disable" [36, 4, 60, 4, 'px']
@var number chat-zoom-for-mobile "YTMobile.Chat ::Zoom" [1.0, 0.4, 1.2, 0.05]
@var range chat-min-height "YTMobile.Chat ::Min.Height" [400, 20, 900, 10, 'px']
@var checkbox t34 "Disable Some CSS Rules for laggy page" 0
==/UserStyle== */
/*
@var range chrome-bottom-bar-margin "Chrome Bottom Bar Margin" [12, 6, 48, 6, "px"]
Chrome Bottom Bar Margin is 12px only due to
MU = function(a) {
var b = a.u.ag()
, c = a.G.getVideoData().D
, d = 0;
a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
return 12 * (c ? 0 : b ? 2 : 1) + d
}
*/
// d
t33 = t34
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
dummy() {
// dummy
border: 0;
}
buildL4(type, args...) {
st1 = join('', ':', type, '(', join('\, ', args), ')')
selector(st1)
}
if min-below-area <= 10px {
min-below-area = 0px
}
if min-below-area-for-theater <= 10px {
min-below-area-for-theater = 0px
}
chat-btn-height = chat-btn-height + 1px
if chat-btn-height == 4px + 1px {
chat-btn-height = 0px
}
masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
no-masthead-w = no-masthead //
chrome-bottom-bar-margin = 12px // this cannot be changed
single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
if single-col-mobile == 1 and no-masthead-w == 0 {
no-masthead-w = 2 //
}
chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
content361(){
html {
--ylb-min-below-area: min-below-area;
}
// general fix
ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy {
min-height: unset;
}
#movie_player .ytp-cued-thumbnail-overlay-image {
/* background-size: contain !important; */
background-size: auto 100% !important;
}
ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
padding-top: var(--ytd-margin-3x);
}
ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
padding-top: 0;
margin-top: 0;
}
m = youtube-wpr ? ':not([tabview-loaded])[youtube-wpr*="h2"]': ":not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)"
html{selector(m)} {buildL4('is',
'#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy',
'#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
display: none !important;
}
html:not([tabview-loaded]) #cinematics {
// contain: layout;
contain: layout size style;
user-select: none;
touch-action: none;
pointer-events: none;
}
}
//
contentNoMasthead() {
// root = html
& {
/* 0px not 0 */
--ytd-masthead-height: 0px;
--ytd-toolbar-height: 0px;
--ytd-watch-flexy-masthead-height: 0px;
}
/*
& ytd-watch-flexy {
--ytd-watch-flexy-masthead-height: 0px;
}
*/
/*
#masthead-container + ytd-page-manager#page-manager
has margin-top var(--ytd-masthead-height,var(--ytd-toolbar-height))
*/
ytd-app[style] { /* YouTube set the masthead-height in style */
--ytd-masthead-height: 0px !important;
--ytd-toolbar-height: 0px !important;
--ytd-watch-flexy-masthead-height: 0px !important;
}
& .style-scope{buildL4('is', '#page-manager', 'ytd-watch-flexy', 'ytd-page-manager')} {
--ytd-masthead-height: 0px;
--ytd-toolbar-height: 0px;
--ytd-watch-flexy-masthead-height: 0px;
}
#masthead-container {
height: 0;
--masthead-opacity: 0;
opacity: var(--masthead-opacity) !important;
transition: opacity 300ms;
min-height: masthead-hoverable-height;
contain: layout size style;
}
#masthead-container > ytd-masthead {
transform: translateY(-100%);
transition: transform 300ms;
}
if masthead-hoverable-height > 0 {
ytd-app {
--ut-masthead-background: rgba(15,15,15,0.8);
}
ytd-app[darker-dark-theme] {
--ut-masthead-background: rgba(240,240,240,0.8);
}
ytd-masthead#masthead:hover {
background-color: color(--ut-masthead-background);
z-index: 9999 !important;
}
ytd-masthead#masthead {
background-color: rgba(15,15,15,0.8);
z-index: 9999 !important;
}
#masthead-container:hover {
--masthead-opacity: 1;
}
#masthead-container:hover > ytd-masthead {
transform: translateY(0%);
}
#masthead-container::after {
content: '';
display: flex;
width: 100%;
height: masthead-hoverable-height;
top: 0;
z-index: 77;
cursor: default;
user-select: none !important;
touch-action: none !important;
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
if t33 == 0 {
ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
#columns.style-scope.ytd-watch-flexy,
#primary.style-scope.ytd-watch-flexy,
#primary-inner.style-scope.ytd-watch-flexy,
#secondary.style-scope.ytd-watch-flexy,
#secondary-inner.style-scope.ytd-watch-flexy {
height: 100vh;
max-height: 100%;
}
}
ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
height: 100vh;
#player-theater-container.ytd-watch-flexy {
flex: 77;
max-height: unset;
}
}
&:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
#player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
overflow: visible;
}
}
}
} //
#microformat.ytd-watch-flexy {
position: fixed;
top:-200vh;
left:-200vw;
}
contentSingleColMobile(){
// html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
#chat:not([collapsed]) {
--ytd-margin-2x: 0;
--ytd-margin-4x: 0;
--ytd-margin-6x: 0;
--ytd-margin-8x: 0;
height: 100% !important;
min-height: unset !important;
max-height: 100vh !important;
// position:relative;
// top:auto;
// bottom:0;
iframe#chatframe{
min-height: 0px;
}
if chat-zoom-for-mobile-enable {
iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
iframe-ratio = 100% / chat-zoom-for-mobile
iframe#chatframe {
position:absolute;
transform: iframe-transform;
height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile);
max-height: unset !important;
min-height: unset !important;
transform-origin: 0 0;
width: iframe-ratio !important;
margin-top: chat-btn-height;
}
}
}
m = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
&{selector(m)} {
// html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))
#contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
content: unset;
}
if t33 == 0 {
#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
#below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
/* display:none !important; */
position: fixed !important;
transform: scale(0.01) !important;
transform-origin: 0 0 !important;
left: -100vw !important;
top: -100vh !important;
visibility: collaspe !important;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
}
}
#secondary.ytd-watch-flexy {
display:none !important;
}
.efyt-control-bar {
position: relative;
display: inline-flex;
top: auto;
left: auto;
z-index: 99999;
opacity: 0.8;
transform: translate(calc(-100% + 32px), 0) !important;
}
.efyt-control-bar:hover {
opacity: 1.0;
background: var(--yt-spec-general-background-a);
transform: translate(0px, 0) !important;
}
#player {
margin-bottom: 0;
}
{buildL4('is', '#columns', '#primary')} {
padding: 0;
}
--ylb-min-below-area: chat-min-height;
{buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
object-fit: contain;
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
if t33 == 0 {
#primary-inner.ytd-watch-flexy > :not(.style-scope) {
display: none !important;
}
#below > *:not(#chat) {
/* display:none !important; */
position: fixed !important;
transform: scale(0.01) !important;
transform-origin: 0 0 !important;
left: -100vw !important;
top: -100vh !important;
visibility: collaspe !important;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
}
}
#below:not(:has(#chat)) {
display: none;
}
{buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
display: flex;
flex-direction: column;
margin: 0;
flex: 1;
}
#below {
flex: 1;
}
ytd-watch-flexy {
height: 100vh !important;
max-height: 100vh !important;
}
ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} #player-theater-container.ytd-watch-flexy {
min-height: unset !important;
}
}
}
content2c() {
if t33 == 0 {
if chat-zoom-for-right-col >1 or chat-zoom-for-right-col < 1 {
ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
position:absolute;
margin-top:chat-btn-height;
transform: 'scale(%s)' % chat-zoom-for-right-col;
transform-origin: 0 0;
width: '%s !important' % (100% / chat-zoom-for-right-col);
max-width: unset !important;
height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
z-index: 1; /* for normal youtube */
}
}
if no-masthead-w==0 {
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
.style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
height: calc(100vh - var(--ytd-toolbar-height));
max-height: 100%;
}
}
}
ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
.ytp-chrome-bottom[style*="width"] {
width: unset !important;
left: chrome-bottom-bar-margin !important;
right: chrome-bottom-bar-margin !important;
}
}
/*
// originally this is to avoid sizing issue; however, as userscript "YouTube Video Resize Fix" is a must, this is no longer required.
// this css rule not compatible with YouTubeLiveClock
ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #movie_player {
.ytp-chrome-bottom[style*="width"] {
left: 50% !important;
transform: translateX(-50%);
}
}
*/
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
min-height: unset;
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
padding: 0 primary-content-margin 0;
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) #player .ytd-watch-flexy{buildL4('is', '#player-container-outer', '#player-container-inner', '#player-container')}{
// layout outside
// no effect
// layout inside
max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
}
ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) #player-theater-container.ytd-watch-flexy {
max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
}
body.lock-scrollbar {
overflow-y: auto;
}
/*
body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_]:not([hidden])):has(#movie_player) {
overflow-y: unset !important;
}
*/
ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
width: side-panel-width;
}
}
}
contentf() {
// html
if t33 == 0 {
if (video-padding-left-right + video-padding-top-bottom) > 0 {
#player-container-outer.ytd-watch-flexy {
padding-left: video-padding-left-right;
padding-right: video-padding-left-right;
padding-top: video-padding-top-bottom;
padding-bottom: video-padding-top-bottom;
}
}
body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
}
&:not([tabview-loaded]) {
body ytd-watch-flexy[flexy][is-two-columns_]{buildL4('is', '[is-extra-wide-video_]', '[is-four-three-to-sixteen-nine-video_]')} #primary.ytd-watch-flexy {
max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
}
ytd-watch-flexy:not([fullscreen]) #player-theater-container {
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
height: calc(100vh - var(--ytd-toolbar-height));
}
}
if video-enlarging > 0 {
ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
transform-origin: 50% 50%;
}
}
ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
--ylb-min-below-area: min-below-area-for-theater;
{buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
object-fit: contain;
max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
}
}
if no-bottom-row {
#bottom-row.ytd-watch-metadata {
display: none !important;
}
}
h1.ytd-watch-metadata {
font-size: video-title-size;
--font-size: video-title-size;
line-height: 140%;
margin-bottom: -2px;
}
ytd-watch-flexy.style-scope:not([fullscreen]) {
& {
--ytd-margin-2y: var(--ytd-margin-2x);
--ytd-margin-4y: var(--ytd-margin-4x);
--ytd-margin-6y: var(--ytd-margin-6x);
--ytd-margin-8y: var(--ytd-margin-8x);
}
#columns.style-scope.ytd-watch-flexy {
--ytd-margin-2x: 0;
--ytd-margin-4x: 0;
--ytd-margin-6x: 0;
--ytd-margin-8x: 0;
}
.style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy),
#below,
#player {
--ytd-margin-2x: var(--ytd-margin-2y);
--ytd-margin-4x: var(--ytd-margin-4y);
--ytd-margin-6x: var(--ytd-margin-6y);
--ytd-margin-8x: var(--ytd-margin-8y);
}
#secondary-inner.style-scope.ytd-watch-flexy {
display: flex;
flex-direction: column;
height: 100%;
}
#movie_player {
position: relative;
> .html5-video-container:has(video) {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.html5-video-container > video {
width: unset !important;
height: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 100%;
max-width: 100%;
margin: 0 auto;
}
/*
.ytp-iv-video-content {
width: 100% !important;
height: 100% !important;
}
*/
/*
// this is buggy; eg multiple chapter hover container; can be fixed by YouTube Video Resize Fix Only
.ytp-chapter-hover-container[style*="width"] {
width: 100% !important;
}
*/
.html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
top: 0 !important;
}
}
#chat:not([collapsed]) {
flex: 77;
}
#right-tabs {
display: flex;
margin: 0 !important;
flex: 1;
flex-direction: column;
{buildL4('is', '#material-tabs', '.tab-content')} {
outline: 0;
}
.tab-content {
flex: 77;
}
}
&:not([is-two-columns_]) #primary-inner > *:not(#player) {
padding: 0;
}
&:not([is-two-columns_]) #primary-inner #below > *:not(ytd-live-chat-frame#chat) {
padding: 0 primary-content-margin 0;
}
/*
#player-container-outer.ytd-watch-flexy {
max-width: unset;
}
*/
}
}
if no-round-border {
ytd-live-chat-frame[rounded-container],
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next,
ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next:hover {
border-radius: unset;
}
}
if disable-cinematics {
#cinematics.ytd-watch-flexy {
display: none;
}
}
} //
contentg() {
content2c() //
selector-g = '' //
if mode-for-single-col=="disabled" { //
selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
} //
&{s(selector-g)} { //
// html
contentf() //
} //
}
content361() //
selectors-2col = { //
"expanded-panel": join(', ',
"html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
"html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]):not([theater]))"
),
"expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
"expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
"always": "html"
} //
if youtube-wpr {
selectors-2col = { //
"expanded-panel": join(', ',
'html:not([tabview-loaded])[youtube-wpr*="h2"]',
'html[tabview-loaded][youtube-wpr*="s"][youtube-wpr*="f"][youtube-wpr*="t"]'
),
"expanded-live": 'html[youtube-wpr*="h2"]',
"expandable-live": 'html:not([youtube-wpr*="h0"])',
"always": "html"
} //
}
selector-2col = selectors-2col[mode-for-two-col]
selectors-k = split(', ', selector-2col)
for selector-k in selectors-k {
{s(selector-k)} {
if no-masthead-w==1 {
contentNoMasthead()
}
contentg() //
}
}
if single-col-mobile {
m = youtube-wpr ? '[youtube-wpr*="S"][youtube-wpr*="f"]': ":has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))"
html{selector(m)} {
if no-masthead-w==2 {
contentNoMasthead()
}
contentSingleColMobile()
}
}
@supports not selector(:has(body)) {
html::after {
display: block;
content: 'Your browser does not support "has-selector". Please update to latest version and enable it via configuration.';
width: 60vh;
padding: 12px;
height: auto;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 0 0;
background: #71210f;
color: #d2dadb;
font-size: 14pt;
text-shadow: 1px 1px 2px #605262;
}
}
@supports selector(:has(body)) {
if youtube-wpr {
@keyframes wpr-message-appear {
0% {
top: -300vh;
}
1% {
top: 50%;
}
100% {
top: 50%;
}
}
html:not([youtube-wpr])::after {
display: block;
content: 'YouTube Live Borderless: YouTube WPR is not yet installed. Please install the userscript https://greatest.deepsurf.us/scripts/457319 in order to use YouTube WPR';
width: 60vh;
padding: 12px;
height: auto;
position: fixed;
left: 50%;
top: -300vh;
transform: translate(-50%, -50%);
transform-origin: 0 0;
background: #71210f;
color: #d2dadb;
font-size: 14pt;
text-shadow: 1px 1px 2px #605262;
animation: wpr-message-appear 1ms 2s forwards;
}
}
}
}