From f7e1df45b6d6bdca2cb4e8dd351f3ae3f7159b5f Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <1697880+AngelFQC@users.noreply.github.com>
Date: Wed, 19 Jun 2024 09:19:10 -0500
Subject: [PATCH] Display: Improve mediaelementjs styles for video poster -
 refs BT#21628

---
 .../css/scss/libs/mediaelementjs/_styles.scss | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/assets/css/scss/libs/mediaelementjs/_styles.scss b/assets/css/scss/libs/mediaelementjs/_styles.scss
index a3c2fa23248..93b31e1ee43 100644
--- a/assets/css/scss/libs/mediaelementjs/_styles.scss
+++ b/assets/css/scss/libs/mediaelementjs/_styles.scss
@@ -1,15 +1,40 @@
 .mejs {
   &__container {
-    @apply bg-transparent rounded-lg inline-block
+    @apply bg-transparent rounded-lg inline-block max-w-full
+      md:max-w-none
       focus:outline-none focus:drop-shadow-lg;
 
     video {
-      @apply rounded-lg;
+      @apply rounded-lg w-full h-full object-contain;
+    }
+  }
+
+  &__mediaelement {
+    > [id^="mejs_"] {
+      @apply w-full h-full;
+    }
+  }
+
+  &__poster {
+    @apply rounded-lg max-w-full bg-contain
+      md:max-w-none;
+
+    &-img {
+      @apply rounded-lg object-contain;
     }
   }
 
   &__overlay {
-    @apply bg-support-3 rounded-lg;
+    @apply bg-support-3 rounded-lg max-w-full
+      md:max-w-none;
+
+    &-error {
+      @apply w-full h-full;
+
+      img {
+        @apply rounded-lg object-contain w-full h-full;
+      }
+    }
 
     &-loading {
       svg {