From 9f7ef3c96ba26e7aab0dee87cc338e2624f5e773 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sun, 8 Mar 2026 23:49:49 +0100
Subject: [PATCH] Refactor button background colors for improved visibility and
 update YouTube iframe attributes for better playback control

---
 .../Web/mediaBarEnhanced.css                   |  6 +++---
 .../Web/mediaBarEnhanced.js                    | 18 +++---------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
index baa5a6a..1f250d8 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css
@@ -501,7 +501,7 @@
   font-family: "Archivo Narrow", sans-serif;
   font-size: 18px;
   white-space: nowrap;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   cursor: pointer;
   transition: all 0.3s ease;
@@ -515,7 +515,7 @@
 
 .detail-button {
   font-size: 18px;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   border-radius: 50%;
   height: 50px;
@@ -530,7 +530,7 @@
 
 .favorite-button {
   font-size: 18px;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgb(255, 255, 255);
   color: red;
   border-radius: 50%;
   height: 50px;
diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
index 2a948c2..e378448 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -749,7 +749,7 @@ const SlideUtils = {
     if (isYoutube && videoId) {
       const ytIframe = this.createElement('iframe', {
         id: 'modal-yt-player',
-        src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
+        src: `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&controls=1&iv_load_policy=3&rel=0&playsinline=1`,
         allow: 'autoplay; encrypted-media',
         style: 'width: 100%; height: 100%; border: none;',
         referrerpolicy: 'strict-origin-when-cross-origin',
@@ -759,20 +759,6 @@ const SlideUtils = {
       contentContainer.appendChild(ytIframe);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
-
-      this.loadYouTubeIframeAPI().then(() => {
-        new YT.Player(ytIframe, {
-          playerVars: {
-            autoplay: 1,
-            controls: 1,
-            iv_load_policy: 3,
-            rel: 0,
-            playsinline: 1,
-            origin: window.location.origin,
-            enablejsapi: 1
-          }
-        });
-      });
     } else {
       const video = this.createElement('video', {
         src: url,
@@ -780,6 +766,7 @@ const SlideUtils = {
         autoplay: true,
         className: 'video-modal-player'
       });
+      video.setAttribute('playsinline', '');
       contentContainer.appendChild(video);
       overlay.append(closeButton, contentContainer);
       document.body.appendChild(overlay);
@@ -1949,6 +1936,7 @@ const SlideCreator = {
         };
 
         videoAttributes.muted = "";
+        videoAttributes.playsinline = "";
 
         videoBackdrop = SlideUtils.createElement("video", videoAttributes);
         videoBackdrop.volume = 0.4;