☰

YouTube Always Show Progress Bar - CSS Method

Shows YouTube progress bar at all times, formatted for theater mode, via lightweight CSS.

  1. /* ==UserStyle==
  2. @name           YouTube Always Show Progress Bar - CSS Method
  3. @namespace      greatest.deepsurf.us/en/users/1252550-kiokito
  4. @domain         youtube.com
  5. @version        1.0.0
  6. @description    Shows YouTube progress bar at all times, formatted for theater mode, via lightweight CSS.
  7. @author         Kiokito
  8. @match          http*://*youtube.com/*
  9. @run-at         document-start
  10. @locale         en "English"
  11. ==/UserStyle== */
  12.     
  13. @-moz-document domain("youtube.com") {
  14.     
  15.     html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) {
  16.         overflow: visible !important;
  17.     }
  18.     
  19.     html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) .ytp-chrome-bottom {
  20.         display: block !important;
  21.         opacity: 1 !important;
  22.         position: absolute !important;
  23.         bottom: -4.4vh !important;
  24.         width: 100% !important;
  25.         z-index: 100 !important;
  26.     }
  27.     
  28.     html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) .ytp-gradient-bottom {
  29.         display: none !important;
  30.     }
  31.     
  32.     html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) .ytp-caption-window-bottom {
  33.         bottom: 5vh !important;
  34.     }
  35.     
  36.     html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) #player-container {
  37.         padding-bottom: 3.5vh !important;
  38.     }
  39.     
  40.     @media (max-width: 600px) {
  41.         html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) .ytp-chrome-bottom {
  42.             bottom: 0vh !important;
  43.         }
  44.         html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) .ytp-caption-window-bottom {
  45.             bottom: 4vh !important;
  46.         }
  47.         html:not(.ftw-fullsize.on) .html5-video-player:not(.ytp-fullscreen) #player-container {
  48.             padding-bottom: 4vh !important;
  49.         }
  50.     }
  51. }