[VMediaPlayer, ModPlayVOD] Fix video player's responsive height scaling

Without this fix, the video player would overflow beyond the height of the modal window.
m4heshd · Jul 21, 2024 · d1f8b5e · d1f8b5e
1 parent 1193f84
commit d1f8b5e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/frontend/src/components/ModPlayVOD.vue b/frontend/src/components/ModPlayVOD.vue
@@ -58,5 +58,14 @@ const modPlayVOD = useModPlayVODStore();
   max-width: 950rem;
   max-height: 80%;
   overflow: hidden;
+
+  .v-media-player {
+    height: 100%;
+
+    & > .plyr {
+      height: 100%;
+      max-height: 100%;
+    }
+  }
 }
 </style>
diff --git a/frontend/src/components/VMediaPlayer.vue b/frontend/src/components/VMediaPlayer.vue
@@ -109,6 +109,7 @@ onBeforeUnmount(() => {
   --plyr-color-main: var(--primary);
 
   video {
+    height: 100%;
     min-width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;