Merge pull request #68 from Kirari04/fix/player-iframe-sizing

fix(ui): improve player responsiveness in iframes

Author: Kirari04

views/player_v2.html

@@ -43,15 +43,23 @@
             --media-focus-ring: 0 0 0 3px rgb(255 255 255 / 0.5);
         }
 
+        * {
+            box-sizing: border-box;
+        }
+
+        html,
         body {
             margin: 0;
             padding: 0;
-            background-color: #09090b; /* Zinc 950 */
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            overflow: hidden;
+        }
+
+        body {
             color: #fff;
             font-family: var(--font-sans);
-            height: 100vh;
-            width: 100vw;
-            overflow: hidden;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -63,13 +71,16 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            position: relative;
         }
 
         media-player {
             width: 100%;
             height: 100%;
             border: none;
             background-color: transparent;
+            /* Ensure the player doesn't force an aspect ratio that overflows the container */
+            aspect-ratio: auto;
         }
 
         /* Continue Watching Popup */
@@ -156,6 +167,7 @@
         <media-player
             title="{{ .Title }}"
             poster="{{ .Thumbnail }}"
+            view-type="video"
             crossorigin
             playsinline
         >