From bf7c7fb8e87e10c85fa4e7fedf21d6932e3df3cd Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Sat, 14 Feb 2026 01:33:54 +0100
Subject: [PATCH] Enhance video backdrop handling to support YouTube iframe
 integration and improve video playback logic

---
 .../Web/mediaBarEnhanced.js                   | 33 +++++++++++++++----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
index 9f99339..c3e35ce 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -1719,6 +1719,13 @@ const SlideCreator = {
                   if (iframe) {
                     iframe.setAttribute('tabindex', '-1');
                     iframe.setAttribute('inert', '');
+                    // Preserve video-backdrop class on the iframe (YT API replaces the original div)
+                    iframe.classList.add('backdrop', 'video-backdrop');
+                    if (CONFIG.fullWidthVideo) {
+                      iframe.classList.add('video-backdrop-full');
+                    } else {
+                      iframe.classList.add('video-backdrop-default');
+                    }
                   }
 
                   // Store start/end time and videoId for later use
@@ -2333,7 +2340,10 @@ const SlideshowManager = {
       // Manage Video Playback: Stop others, Play current
       this.pauseOtherVideos(currentItemId);
 
-      const hasVideoBackdrop = !!currentSlide.querySelector('.video-backdrop');
+      // Check for video backdrop (also check by YouTube player ID since YT replaces div with iframe)
+      const hasVideoBackdrop = !!(currentSlide.querySelector('.video-backdrop') || 
+        currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
+        (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
 
       // If paused and new slide has video, un-pause for video playback.
       // If paused and new slide has only images, stay paused.
@@ -2391,7 +2401,9 @@ const SlideshowManager = {
       this.updateDots();
 
       // Only restart interval if we are NOT waiting for a video to end
-      const hasVideo = currentSlide.querySelector('.video-backdrop');
+      const hasVideo = currentSlide.querySelector('.video-backdrop') || 
+        currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
+        (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
       if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
         if (CONFIG.waitForTrailerToEnd && hasVideo) {
           STATE.slideshow.slideInterval.stop();
@@ -2653,7 +2665,9 @@ const SlideshowManager = {
       // Only restart interval if we are NOT waiting for a video to end
       const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
       const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
-      const hasVideo = currentSlide && currentSlide.querySelector('.video-backdrop');
+      const hasVideo = currentSlide && (currentSlide.querySelector('.video-backdrop') || 
+        currentSlide.querySelector(`#youtube-player-${currentItemId}`) ||
+        (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]));
 
       if (!CONFIG.waitForTrailerToEnd || !hasVideo) {
         STATE.slideshow.slideInterval.start();
@@ -2712,15 +2726,22 @@ const SlideshowManager = {
    * @returns {boolean} Whether a video was found and playback attempted
    */
   playCurrentVideo(slide, itemId) {
-    const videoBackdrop = slide.querySelector('.video-backdrop');
+    // Try finding by class first, then fall back to YouTube player container by ID
+    let videoBackdrop = slide.querySelector('.video-backdrop');
+    if (!videoBackdrop) {
+      // YouTube API replaces the div with an iframe, which may not have the class yet
+      videoBackdrop = slide.querySelector(`#youtube-player-${itemId}`);
+    }
+    // Also check if a player exists in the registry even if no DOM element found
+    const hasRegisteredPlayer = !!(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId]);
 
     // Update mute button visibility
     const muteButton = document.querySelector('.mute-button');
     if (muteButton) {
-      muteButton.style.display = videoBackdrop ? 'block' : 'none';
+      muteButton.style.display = (videoBackdrop || hasRegisteredPlayer) ? 'block' : 'none';
     }
 
-    if (!videoBackdrop) return false;
+    if (!videoBackdrop && !hasRegisteredPlayer) return false;
 
     if (videoBackdrop.tagName === 'VIDEO') {
       videoBackdrop.currentTime = 0;