Add upstream trailer layout feature and update version to 1.5.0.11

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -343,6 +343,45 @@
   z-index: 1;
 }
 
+.video-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 0;
+  z-index: 2;
+  overflow: hidden;
+  transition:
+    width 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+  opacity: 0;
+  pointer-events: none;
+  mask-image:
+    linear-gradient(to right, transparent 10%, black 30%),
+    linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
+
+  -webkit-mask-image:
+    linear-gradient(to right, transparent 10%, black 30%),
+    linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
+
+  mask-composite: intersect;
+  -webkit-mask-composite: source-in;
+}
+
+.video-container.active {
+  opacity: 1;
+  pointer-events: auto;
+  width: 100% !important; /* Force width when active, matching upstream logic behavior */
+}
+
+/* Ensure video inside container fills it */
+.video-container iframe,
+.video-container video {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
 .backdrop-container {
   position: absolute;
   top: 0%;
@@ -389,6 +428,20 @@
       #000000 8%);
 }
 
+.backdrop.with-video {
+  width: 100%;
+  mask-image:
+    linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
+    linear-gradient(to right, black 30%, transparent 85%);
+
+  -webkit-mask-image:
+    linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
+    linear-gradient(to right, black 30%, transparent 85%);
+
+  mask-composite: source-in;
+  -webkit-mask-composite: source-in;
+}
+
 .backdrop-overlay {
   position: absolute;
   top: 0;