diff --git a/youtube/static/plyr_fixes.css b/youtube/static/plyr_fixes.css
new file mode 100644
index 00000000..646e2b5b
--- /dev/null
+++ 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
index 01e4ef35..1a354664 100644
--- 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;
- }
{% if js_data %}
@@ -89,6 +75,7 @@
{% if settings.video_player == 1 %}
+
{% endif %}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index d5c4c628..745dbe02 100644
--- 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 %}
+
{% endif %}
{% endblock head %}