Make YouTube Live Borderless
As of
/* ==UserStyle==
@name YouTube Live Borderless
@version 0.3.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 select mode-for-two-col "Mode for Two Columns" {
"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 for Single Column" {
"YouTube Mobile (Recommended)": "mobile",
"Normal": "normal",
"Disabled": "disabled"
}
@var checkbox no-masthead "Hide Top Masthead Bar" 0
@var number masthead-hoverable-h "MastHead Hoverable (1 = always hide)" [4, 1, 8, 1]
@var range primary-content-margin "Primary Content Margin" [24, 6, 48, 6, "px"]
@var checkbox no-bottom-row "Hide Primary MetaInfo Bottom Row" 0
@var range video-title-size "Video Title Size" [2.0, 1.0, 3.0, 0.2, "rem"]
@var range min-below-area "Minimum area below video" [120, 10, 240, 10, 'px']
@var number side-panel-width "Side Panel Width" [440, 320, 640, 20, "px"]
@var checkbox no-round-border "No Round Border" 1
@var checkbox disable-cinematics "Disable Cinematics Effect" 0
@var number chat-zoom-for-mobile "Chat Zoom for Mobile" [1.0, 0.2, 1.8, 0.05]
==/UserStyle== */
/*
"Fill up Chat Area (experimental)": "chat-fill-up",
@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
}
*/
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
dummy() {
// dummy
border: 0;
}
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=0 //
if mode-for-single-col=="mobile" {
single-col-mobile=1 //
if no-masthead==0 {
no-masthead-w=2 //
}
}
chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
content361(){
// 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;
}
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;
}
}
//
contentNoMasthead() {
&,
ytd-app,
ytd-page-manager[class].style-scope,
ytd-watch-flexy[class].style-scope {
/* 0px not 0 */
--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 {
#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;
}
}
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;
}
#player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
overflow: visible;
}
}
ytd-watch-flexy.style-scope:not([fullscreen]) {
#movie_player .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
top: 0 !important;
}
}
} //
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;
--single-col-mobile-below-inside-display: flex;
if chat-zoom-for-mobile-enable {
iframe#chatframe {
iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
iframe-ratio = 100% / chat-zoom-for-mobile
transform: iframe-transform;
height: iframe-ratio;
position: absolute;
/* max-height: unset !important; */
transform-origin: 0 0;
width: iframe-ratio;
}
}
}
&:has(#chat:not([collapsed])) {
#contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
content: unset;
}
#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
#below.ytd-watch-flexy > #related.ytd-watch-flexy,
#below.ytd-watch-flexy > ytd-watch-metadata.ytd-watch-flexy {
display: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;
}
#columns,
#primary {
padding: 0;
}
#player,
#player-theater-container,
#player-container-outer,
#player-container-inner,
#player-container,
#movie_player,
#movie_player video {
object-fit: contain;
max-height: calc(100vh - 400px) !important;
}
#primary-inner.ytd-watch-flexy > :not(.style-scope) {
display: none !important;
}
#below > * {
display: var(--single-col-mobile-below-inside-display) !important;
}
#below:not(:has(#chat)) {
display: none;
}
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[theater] #player-theater-container.ytd-watch-flexy,
ytd-watch-flexy[fullscreen] #player-theater-container.ytd-watch-flexy {
min-height: unset !important;
}
}
}
contentf() {
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]) {
#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy {
display: none !important;
}
#player-theater-container {
max-height: calc(100vh - 100px) !important;
}
#cinematics {
// contain: layout;
contain: layout size style;
user-select: none;
touch-action: none;
pointer-events: none;
}
}
if no-masthead-w==2 {
//
} else if no-masthead-w==1 {
contentNoMasthead()
}
else {
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
#secondary.style-scope.ytd-watch-flexy,
#secondary-inner.style-scope.ytd-watch-flexy {
height: calc(100vh - var(--ytd-toolbar-height));
max-height: 100%;
}
}
}
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: calc(var(--font-size) * 1.4);
}
& {
--ylb-min-below-area: min-below-area;
}
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;
}
}
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: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;
}
*/
}
#chat:not([collapsed]) {
flex: 77;
}
#right-tabs {
display: flex;
margin: 0 !important;
flex: 1;
flex-direction: column;
#material-tabs,
.tab-content {
outline: 0;
}
.tab-content {
flex: 77;
}
}
&[is-two-columns_] #primary-inner > *:not(#player) {
padding: 0 primary-content-margin 0;
}
&: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;
}
*/
}
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
ytd-live-chat-frame#chat:not([collapsed]) {
min-height: unset;
}
}
if min-below-area > 0 {
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
#player #player-container-outer.ytd-watch-flexy, // layout outside
#player #player-container-inner.ytd-watch-flexy, // no effect
#player #player-container.ytd-watch-flexy { // layout inside
max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px));
}
}
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));
}
}
}
else {
ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
#player #player-container-outer.ytd-watch-flexy,
#player #player-container-inner.ytd-watch-flexy,
#player #player-container.ytd-watch-flexy {
max-height: calc(100vh - var(--ytd-toolbar-height, 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)); // for 4:3 video
}
}
}
body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_] #columns.ytd-watch-flexy #primary-inner.ytd-watch-flexy #player #movie_player video[src]) { // note: might not be supported by FireFox due to its bug
overflow-y: unset !important;
}
ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
width: side-panel-width;
}
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 mode-for-single-col=="chat-fill-up" {
&:has(#below > #chat:not([collapsed])):not([tabview-loaded]) { // note: might not be supported by FireFox due to its bug
#primary-inner.style-scope.ytd-watch-flexy {
max-height: 100vh;
display: flex;
flex-direction: column;
}
#below.style-scope.ytd-watch-flexy {
flex-shrink: 1;
overflow: auto;
position: relative;
padding-top: 100%;
}
#below.style-scope.ytd-watch-flexy > #chat.style-scope.ytd-watch-flexy:not([collapsed]) {
margin: 0;
min-height: unset;
height: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
}
}
if disable-cinematics {
#cinematics.ytd-watch-flexy {
display: none;
}
}
} //
contentg() {
if mode-for-single-col=="disabled" {
&:has(ytd-watch-flexy[is-two-columns_]){
contentf()
}
} else {
contentf()
}
}
content361()
if mode-for-two-col == "expanded-panel" {
html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe),
/*
html:has(ytd-engagement-panel-section-list-renderer[visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"]:not([hidden])),
html:has(.tab-content-cld:not(.tab-content-hidden)),
*/
html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]):not([theater])) {
contentg() //
}
} else if mode-for-two-col == "expanded-live" {
html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe) {
contentg() //
}
} else if mode-for-two-col == "expandable-live" {
html:has(ytd-live-chat-frame#chat):has(iframe#chatframe) {
contentg() //
}
} else if mode-for-two-col == "always" {
html { //
contentg() //
}
}
if single-col-mobile {
html {
--single-col-mobile-below-inside-display: none;
}
&:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])) {
if no-masthead-w==2 {
contentNoMasthead()
}
contentSingleColMobile()
}
}
}