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 %}