Make raw videos adaptive for aspect ratios

Sadly there is no info about video size for iframes, so they will be keeped as 16/9.

Let me know if this change breaks anything.

1 files changed, 30 insertions, 20 deletions

diff --git a/res/css/des.css b/res/css/des.css
index bd354a7..a6fd43d 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -360,32 +360,43 @@ header h4 {
 
 /* Embed responsive */
 
+.embed-responsive:empty {
+  min-height: 60vh;
+}
+
 .embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-  background-color: var(--background-video);
+  background-color: var(--background);
+  width: 100%;
+  max-height: 80vh;
 }
 
-.embed-responsive video,
-.embed-responsive iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  height: 100%;
+#temp-videoplayer {
+  display: none;
+}
+
+#videoplayer {
   width: 100%;
-  border: 0;
+  max-height: 80vh;
 }
 
-.embed-responsive.embed-responsive-16by9 {
-  padding-bottom: 56.25%;
+iframe#videoplayer {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 16 / 9;
 }
 
-.embed-responsive.embed-responsive-4by3 {
-  padding-bottom: 75%
+@media only screen and (orientation: portrait) {
+  .embed-responsive:empty {
+    min-height: 20vh;
+  }
+
+  .embed-responsive {
+    max-height: 50vh;
+  }
+
+  #videoplayer {
+    max-height: 50vh;
+  }
 }
 
 /* Playlist */
@@ -509,7 +520,7 @@ footer#footer {
   flex-direction: column;
   flex-wrap: nowrap;
   padding: 1rem;
-  height: calc(100vh - 56.25vw);
+  height: 40vh;
 }
 
 #chat header {
@@ -540,7 +551,6 @@ footer#footer {
 
 #userlist {
   padding: 1rem;
-  height: 11rem;
 }
 
 .userlist_item {