diff --git a/assets/css/default.css b/assets/css/default.css
index a725b456..17264532 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -310,194 +310,15 @@ footer a {
}
}
-/* Control Bar */
-@media screen and (max-width: 640px) {
- .video-js .vjs-control-bar,
- .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
- overflow-x: scroll;
- }
-}
-
-ul.vjs-menu-content::-webkit-scrollbar {
- display: none;
-}
-
-.vjs-user-inactive {
- cursor: none;
-}
-
-.video-js .vjs-text-track-display > div > div > div {
- background-color: rgba(0, 0, 0, 0.75) !important;
- border-radius: 9px !important;
- padding: 5px !important;
-}
-
-.vjs-play-control,
-.vjs-volume-panel,
-.vjs-current-time,
-.vjs-time-control,
-.vjs-duration,
-.vjs-progress-control,
-.vjs-remaining-time {
- order: 1;
-}
-
-.vjs-captions-button {
- order: 2;
-}
-
-.vjs-quality-selector,
-.video-js .vjs-http-source-selector {
- order: 3;
-}
-
-.vjs-playback-rate {
- order: 4;
-}
-
-.vjs-share-control {
- order: 5;
-}
-
-.vjs-fullscreen-control {
- order: 6;
-}
-
-.vjs-playback-rate > .vjs-menu {
- width: 50px;
-}
-
-.vjs-control-bar {
- display: flex;
- flex-direction: row;
- scrollbar-width: none;
-}
-
-.vjs-control-bar::-webkit-scrollbar {
- display: none;
-}
-
-.video-js .vjs-icon-cog {
- font-size: 18px;
-}
-
-.video-js .vjs-control-bar,
-.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
- background-color: rgba(35, 35, 35, 0.75);
-}
-
-.vjs-menu li.vjs-menu-item:focus,
-.vjs-menu li.vjs-menu-item:hover {
- background-color: rgba(255, 255, 255, 0.75);
- color: rgba(49, 49, 51, 0.75);
-}
-
-.vjs-menu li.vjs-selected,
-.vjs-menu li.vjs-selected:focus,
-.vjs-menu li.vjs-selected:hover {
- background-color: rgba(0, 182, 240, 0.75);
-}
-
-/* Progress Bar */
-.video-js .vjs-slider {
- background-color: rgba(15, 15, 15, 0.5);
-}
-
fieldset > select,
span > select {
color: rgba(49, 49, 51, 1);
}
-.video-js .vjs-load-progress,
-.video-js .vjs-load-progress div {
- background: rgba(87, 87, 88, 1);
-}
-
-.video-js .vjs-slider:hover,
-.video-js button:hover {
- color: rgba(0, 182, 240, 1);
-}
-
-.video-js .vjs-play-progress {
- background-color: rgba(0, 182, 240, 1);
-}
-
-/* Overlay */
-.video-js .vjs-overlay {
- background-color: rgba(35, 35, 35, 0.75);
- color: rgba(255, 255, 255, 1);
-}
-
-/* ProgressBar marker */
-.vjs-marker {
- background-color: rgba(255, 255, 255, 1);
- z-index: 0;
-}
-
-/* Big "Play" Button */
-.video-js .vjs-big-play-button {
- background-color: rgba(35, 35, 35, 0.5);
-}
-
-.video-js:hover .vjs-big-play-button {
- background-color: rgba(35, 35, 35, 0.75);
-}
-
-.video-js .vjs-current-time,
-.video-js .vjs-time-divider,
-.video-js .vjs-duration {
- display: block;
-}
-
-.video-js .vjs-time-divider {
- min-width: 0px;
- padding-left: 0px;
- padding-right: 0px;
-}
-
-.video-js .vjs-poster {
- background-size: cover;
- object-fit: cover;
-}
-
-.player-dimensions.vjs-fluid {
- padding-top: 82vh;
-}
-
-video.video-js {
- position: absolute;
- height: 100%;
-}
-
-#player-container {
- position: relative;
- padding-bottom: 82vh;
- height: 0;
-}
-
.pure-control-group label {
word-wrap: normal;
}
-.video-js.player-style-invidious {
- /* This is already the default */
-}
-
-.video-js.player-style-youtube .vjs-control-bar {
- display: flex;
- flex-direction: row;
-}
-.video-js.player-style-youtube .vjs-big-play-button {
- /*
- Styles copied from video-js.min.css, definition of
- .vjs-big-play-centered .vjs-big-play-button
- */
- top: 50%;
- left: 50%;
- margin-top: -0.81666em;
- margin-left: -1.5em;
-}
-
/*
* Light theme
*/
diff --git a/assets/css/player.css b/assets/css/player.css
new file mode 100644
index 00000000..9721c047
--- /dev/null
+++ b/assets/css/player.css
@@ -0,0 +1,178 @@
+/* Control Bar */
+@media screen and (max-width: 640px) {
+ .video-js .vjs-control-bar,
+ .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ overflow-x: scroll;
+ }
+}
+
+ul.vjs-menu-content::-webkit-scrollbar {
+ display: none;
+}
+
+.vjs-user-inactive {
+ cursor: none;
+}
+
+.video-js .vjs-text-track-display > div > div > div {
+ background-color: rgba(0, 0, 0, 0.75) !important;
+ border-radius: 9px !important;
+ padding: 5px !important;
+}
+
+.vjs-play-control,
+.vjs-volume-panel,
+.vjs-current-time,
+.vjs-time-control,
+.vjs-duration,
+.vjs-progress-control,
+.vjs-remaining-time {
+ order: 1;
+}
+
+.vjs-captions-button {
+ order: 2;
+}
+
+.vjs-quality-selector,
+.video-js .vjs-http-source-selector {
+ order: 3;
+}
+
+.vjs-playback-rate {
+ order: 4;
+}
+
+.vjs-share-control {
+ order: 5;
+}
+
+.vjs-fullscreen-control {
+ order: 6;
+}
+
+.vjs-playback-rate > .vjs-menu {
+ width: 50px;
+}
+
+.vjs-control-bar {
+ display: flex;
+ flex-direction: row;
+ scrollbar-width: none;
+}
+
+.vjs-control-bar::-webkit-scrollbar {
+ display: none;
+}
+
+.video-js .vjs-icon-cog {
+ font-size: 18px;
+}
+
+.video-js .vjs-control-bar,
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+ background-color: rgba(35, 35, 35, 0.75);
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover {
+ background-color: rgba(255, 255, 255, 0.75);
+ color: rgba(49, 49, 51, 0.75);
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover {
+ background-color: rgba(0, 182, 240, 0.75);
+}
+
+/* Progress Bar */
+.video-js .vjs-slider {
+ background-color: rgba(15, 15, 15, 0.5);
+}
+
+.video-js .vjs-load-progress,
+.video-js .vjs-load-progress div {
+ background: rgba(87, 87, 88, 1);
+}
+
+.video-js .vjs-slider:hover,
+.video-js button:hover {
+ color: rgba(0, 182, 240, 1);
+}
+
+.video-js .vjs-play-progress {
+ background-color: rgba(0, 182, 240, 1);
+}
+
+/* Overlay */
+.video-js .vjs-overlay {
+ background-color: rgba(35, 35, 35, 0.75);
+ color: rgba(255, 255, 255, 1);
+}
+
+/* ProgressBar marker */
+.vjs-marker {
+ background-color: rgba(255, 255, 255, 1);
+ z-index: 0;
+}
+
+/* Big "Play" Button */
+.video-js .vjs-big-play-button {
+ background-color: rgba(35, 35, 35, 0.5);
+}
+
+.video-js:hover .vjs-big-play-button {
+ background-color: rgba(35, 35, 35, 0.75);
+}
+
+.video-js .vjs-current-time,
+.video-js .vjs-time-divider,
+.video-js .vjs-duration {
+ display: block;
+}
+
+.video-js .vjs-time-divider {
+ min-width: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
+}
+
+.video-js .vjs-poster {
+ background-size: cover;
+ object-fit: cover;
+}
+
+.player-dimensions.vjs-fluid {
+ padding-top: 82vh;
+}
+
+video.video-js {
+ position: absolute;
+ height: 100%;
+}
+
+#player-container {
+ position: relative;
+ padding-bottom: 82vh;
+ height: 0;
+}
+
+.video-js.player-style-invidious {
+ /* This is already the default */
+}
+
+.video-js.player-style-youtube .vjs-control-bar {
+ display: flex;
+ flex-direction: row;
+}
+.video-js.player-style-youtube .vjs-big-play-button {
+ /*
+ Styles copied from video-js.min.css, definition of
+ .vjs-big-play-centered .vjs-big-play-button
+ */
+ top: 50%;
+ left: 50%;
+ margin-top: -0.81666em;
+ margin-left: -1.5em;
+}
diff --git a/src/invidious/views/components/player_sources.ecr b/src/invidious/views/components/player_sources.ecr
index 0374c983..a99fdbca 100644
--- a/src/invidious/views/components/player_sources.ecr
+++ b/src/invidious/views/components/player_sources.ecr
@@ -4,6 +4,7 @@
+