Plyr: Improve controls css - better contrast and less intrusive

Decrease height of controls background, so that it does not interfere with clicking on the video. Make controls background more clearly dilineated - same reason. Make the buffered region on the progress bar brighter so that it can be distinguished from the lightness of the video sidebars (in gray theme)
user234683 · Jul 28, 2021 · df3e4be · df3e4be
1 parent b75dc03
commit df3e4be
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/youtube/static/plyr_fixes.css b/youtube/static/plyr_fixes.css
@@ -0,0 +1,30 @@
+body{
+	--plyr-video-controls-background: rgba(0,0,0,0.8);
+}
+
+/* make buffered progress more visible */
+.plyr--video .plyr__progress__buffer{
+    color: rgba(255,255,255,0.75) !important;
+}
+
+/* Avoid visual jumps and flashes as plyr loads */
+.plyr audio, .plyr iframe, .plyr video{
+    width: 100% !important;
+    height: 100% !important;
+}
+.plyr__video-wrapper{
+    height: 100% !important;
+    width: 100% !important;
+}
+
+/* Prevent this div from blocking right-click menu for video
+e.g. Firefox playback speed options */
+.plyr__poster{
+    display: none !important;
+}
+
+/* Get rid of obnoxiously high padding on controls bar */
+.plyr__controls{
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+}
diff --git a/youtube/templates/embed.html b/youtube/templates/embed.html
@@ -66,20 +66,6 @@
                 width: 100%;
                 height: 56.25vw; /* 360/640 == 720/1280 */
             }
-                /* Avoid visual jumps and flashes as plyr loads */
-                .plyr audio, .plyr iframe, .plyr video{
-                    width: 100% !important;
-                    height: 100% !important;
-                }
-                .plyr__video-wrapper{
-                    height: 100% !important;
-                    width: 100% !important;
-                }
-                /* Prevent this div from blocking right-click menu for video
-                e.g. Firefox playback speed options */
-                .plyr__poster{
-                    display: none !important;
-                }
         </style>
 
         {% if js_data %}
@@ -89,6 +75,7 @@
         {% if settings.video_player == 1 %}
             <!-- plyr -->
             <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
+            <link href="/youtube.com/static/plyr_fixes.css" rel="stylesheet"/>
             <!--/ plyr -->
         {% endif %}
     </head>

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
@@ -85,16 +85,6 @@
                     height: 0px;
                 }
             }
-                /* Avoid visual jumps and flashes as plyr loads */
-                .plyr audio, .plyr iframe, .plyr video{
-                    width: 100% !important;
-                    height: 100% !important;
-                }
-                .plyr__video-wrapper{
-                    height: 100% !important;
-                    width: 100% !important;
-                }
-
                 video{
                     background-color: var(--video-background-color);
                 }
@@ -125,11 +115,6 @@
         }
     {% endif %}
 
-    /* Prevent this div from blocking right-click menu for video
-    e.g. Firefox playback speed options */
-    .plyr__poster{
-        display: none !important;
-    }
 
 
     main{
@@ -450,6 +435,7 @@
     {% if settings.video_player == 1 %}
         <!-- plyr -->
         <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"/>
+        <link href="/youtube.com/static/plyr_fixes.css" rel="stylesheet"/>
         <!--/ plyr -->
     {% endif %}
 {% endblock head %}