Resize the window to a minimum view to listen the music
/* ==UserStyle==
@name Youtube MiniView
@namespace http://userstyles.org
@version 0.2
@author CY Fung
@match https://www.youtube.com/*
@description Resize the window to a minimum view to listen the music
@license MIT
@run-at document-start
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/") {
@media only screen and (max-height: 296px) {
/* 250px + 46px */
html, html body, *:only-child{
min-width:0 !important;
}
ytd-page-manager ytd-watch-flexy{
width:100vw;
margin:0;
padding:0;
top:0;
position:fixed;
}
ytd-masthead#masthead{
margin-top:calc(-1 * var(--ytd-watch-flexy-masthead-height));
}
ytd-masthead#masthead, #masthead-container{
visibility: collapse;
z-index:-1;
pointer-events:none;
}
#primary-inner>#player{
position:relative !important;
}
ytd-player#ytd-player #container{
padding:0;
margin:0;
display: flex;
flex-direction: column;
align-items: center;
}
ytd-player#ytd-player #container>*, ytd-player#ytd-player #container [class*="ytp-chrome-"]{
left:auto !important;
}
ytd-player#ytd-player #container [class*="ytp-chrome-"]{
z-index:25 !important;
}
ytd-player#ytd-player #container #movie_player{
position:relative;
width:100% !important;
}
ytd-player#ytd-player video{
position:relative;
max-height:100vh !important;
max-width:100vw !important;
top:auto !important;
left:auto !important;
height:auto !important;
width:auto !important;
display:inline-block;
}
#primary-inner>#player, #primary-inner>#player [id*="player-container"]{
height:100vh;
min-height:0;
max-height: none;
padding:0;
}
#primary-inner, #primary-inner>#player, #primary-inner>#player div[id*="container"]:only-child, #movie_player {
max-width:100vw !important;
width:auto !important;
}
#primary-inner>#player #movie_player {
display: flex;
align-items: center;
flex-direction: column;
}
#primary-inner>#player .ytp-size-button.ytp-button{
display:none !important;
}
#primary-inner>#player .annotation{
visibility: collapse;
z-index:-1;
}
#primary-inner>#player .ytp-caption-window-container{
z-index:10 !important;
}
#primary-inner>#player #ytp-caption-window-container .caption-window.ytp-caption-window-bottom[style*="text-align:"][style*="center"][style*="bottom:"][style*="margin-left:"][style*="left:"]{
bottom:3vh !important;
}
.ytp-popup.ytp-contextmenu .ytp-menuitem{
zoom:0.6;
width:auto !important;
display:flex;
flex-direction:row;
align-items: center;
}
.ytp-popup.ytp-contextmenu{
width:auto !important;
}
.ytp-popup.ytp-contextmenu .ytp-panel{
position:relative;
}
.ytp-popup.ytp-contextmenu .ytp-panel, .ytp-popup.ytp-contextmenu .ytp-panel-menu{
width:auto !important;
max-width:none !important;
min-width:0 !important;
}
}
@media only screen and (max-height: 90px) {
.ytp-storyboard-framepreview, .ytp-storyboard-framepreview-img, .ytp-tooltip.ytp-bottom.ytp-preview{
visibility: collapse;
z-index:-1;
}
#primary-inner>#player video{
visibility: collapse;
}
#primary-inner>#player .ytp-chrome-bottom{
display:block !important;
opacity:1 !important;
}
.ytp-subtitles-button.ytp-button{
display:none !important;
}
.ytp-fullscreen-button.ytp-button{
display:none !important;
}
#primary-inner>#player #ytp-caption-window-container .caption-window.ytp-caption-window-bottom[style*="text-align:"][style*="center"][style*="bottom:"][style*="margin-left:"][style*="left:"]{
bottom:calc(100vh - 30px) !important;
z-index:10 !important;
}
#ytp-caption-window-container .caption-window:not(.ytp-caption-window-bottom){
display:none !important;
}
}
@media only screen and (max-height: 68px) {
#ytp-caption-window-container .caption-window.ytp-caption-window-bottom{
visibility: collapse;
z-index:-1;
}
}
}