☰

Youtube MiniView

Resize the window to a minimum view to listen the music

  1. /* ==UserStyle==
  2. @name        Youtube MiniView
  3. @namespace   http://userstyles.org
  4. @version     0.2
  5. @author      CY Fung
  6. @match       https://www.youtube.com/*
  7. @description Resize the window to a minimum view to listen the music
  8. @license     MIT
  9. @run-at        document-start
  10. ==/UserStyle== */
  11.  
  12. @-moz-document url-prefix("https://www.youtube.com/") {
  13. @media only screen and (max-height: 296px) {
  14.     /* 250px + 46px */
  15.      html, html body, *:only-child{
  16.          min-width:0 !important;
  17.     }
  18.      ytd-page-manager ytd-watch-flexy{
  19.          width:100vw;
  20.          margin:0;
  21.          padding:0;
  22.          top:0;
  23.          position:fixed;
  24.     }
  25.      ytd-masthead#masthead{
  26.          margin-top:calc(-1 * var(--ytd-watch-flexy-masthead-height));
  27.     }
  28.      ytd-masthead#masthead, #masthead-container{
  29.          visibility: collapse;
  30.          z-index:-1;
  31.          pointer-events:none;
  32.     }
  33.      #primary-inner>#player{
  34.          position:relative !important;
  35.     }
  36.      ytd-player#ytd-player #container{
  37.          padding:0;
  38.          margin:0;
  39.          display: flex;
  40.          flex-direction: column;
  41.          align-items: center;
  42.     }
  43.      ytd-player#ytd-player #container>*, ytd-player#ytd-player #container [class*="ytp-chrome-"]{
  44.          left:auto !important;
  45.     }
  46.      ytd-player#ytd-player #container [class*="ytp-chrome-"]{
  47.          z-index:25 !important;
  48.     }
  49.      ytd-player#ytd-player #container #movie_player{
  50.          position:relative;
  51.          width:100% !important;
  52.     }
  53.      ytd-player#ytd-player video{
  54.          position:relative;
  55.          max-height:100vh !important;
  56.          max-width:100vw !important;
  57.          top:auto !important;
  58.          left:auto !important;
  59.          height:auto !important;
  60.          width:auto !important;
  61.          display:inline-block;
  62.     }
  63.      #primary-inner>#player, #primary-inner>#player [id*="player-container"]{
  64.          height:100vh;
  65.          min-height:0;
  66.          max-height: none;
  67.          padding:0;
  68.     }
  69.      #primary-inner, #primary-inner>#player, #primary-inner>#player div[id*="container"]:only-child, #movie_player {
  70.          max-width:100vw !important;
  71.          width:auto !important;
  72.     }
  73.      #primary-inner>#player #movie_player {
  74.          display: flex;
  75.          align-items: center;
  76.          flex-direction: column;
  77.     }
  78.      #primary-inner>#player .ytp-size-button.ytp-button{
  79.          display:none !important;
  80.     }
  81.      #primary-inner>#player .annotation{
  82.          visibility: collapse;
  83.          z-index:-1;
  84.     }
  85.      #primary-inner>#player .ytp-caption-window-container{
  86.          z-index:10 !important;
  87.     }
  88.      #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:"]{
  89.          bottom:3vh !important;
  90.     }
  91.      .ytp-popup.ytp-contextmenu .ytp-menuitem{
  92.          zoom:0.6;
  93.          width:auto !important;
  94.          display:flex;
  95.          flex-direction:row;
  96.          align-items: center;
  97.     }
  98.      .ytp-popup.ytp-contextmenu{
  99.          width:auto !important;
  100.     }
  101.      .ytp-popup.ytp-contextmenu .ytp-panel{
  102.          position:relative;
  103.     }
  104.      .ytp-popup.ytp-contextmenu .ytp-panel, .ytp-popup.ytp-contextmenu .ytp-panel-menu{
  105.          width:auto !important;
  106.          max-width:none !important;
  107.          min-width:0 !important;
  108.     }
  109. }
  110.  
  111.  
  112.  @media only screen and (max-height: 90px) {
  113.      .ytp-storyboard-framepreview, .ytp-storyboard-framepreview-img, .ytp-tooltip.ytp-bottom.ytp-preview{
  114.          visibility: collapse;
  115.          z-index:-1;
  116.     }
  117.      #primary-inner>#player video{
  118.          visibility: collapse;
  119.     }
  120.      #primary-inner>#player .ytp-chrome-bottom{
  121.          display:block !important;
  122.          opacity:1 !important;
  123.     }
  124.      .ytp-subtitles-button.ytp-button{
  125.          display:none !important;
  126.     }
  127.      .ytp-fullscreen-button.ytp-button{
  128.          display:none !important;
  129.     }
  130.      #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:"]{
  131.          bottom:calc(100vh - 30px) !important;
  132.          z-index:10 !important;
  133.     }
  134.      #ytp-caption-window-container .caption-window:not(.ytp-caption-window-bottom){
  135.          display:none !important;
  136.     }
  137. }
  138.  
  139.  
  140.  @media only screen and (max-height: 68px) {
  141.      #ytp-caption-window-container .caption-window.ytp-caption-window-bottom{
  142.          visibility: collapse;
  143.          z-index:-1;
  144.     }
  145. }
  146.  
  147. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址