Refactor styles on video playback page

Made changes to the styles on the video playback page to enhance visibility and address issues with the video player.
Added a new custom style file for Plyr, and removed redundant and unused styles in watch.css.

Specific changes:
- Added custom_plyr.css for Plyr styles.
- Removed redundant styles related to playback issues in watch.css

1 files changed, 22 insertions, 0 deletions

diff --git a/youtube/static/modules/plyr/custom_plyr.css b/youtube/static/modules/plyr/custom_plyr.css
new file mode 100644
index 0000000..7658321
--- /dev/null
+++ b/youtube/static/modules/plyr/custom_plyr.css
@@ -0,0 +1,22 @@
+/* Prevent this div from blocking right-click menu for video
+e.g. Firefox playback speed options */
+.plyr__poster {
+    display: none;
+}
+
+/* plyr fix */
+.plyr:-moz-full-screen video {
+    max-height: initial;
+}
+
+.plyr:-webkit-full-screen video {
+    max-height: initial;
+}
+
+.plyr:-ms-fullscreen video {
+    max-height: initial;
+}
+
+.plyr:fullscreen video {
+    max-height: initial;
+}