From de4d657d42c3a119b90d73b55d49020598bfb8f8 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Tue, 16 Jun 2026 11:58:57 +0200
Subject: [PATCH] fix(player): make the unavailable overlay fully opaque

The fallback used a translucent background and left the iframe mounted, so
YouTube's own 'Video unavailable' screen bled through and overlapped our
message. Use a solid background and hide the iframe while the error shows.
---
 frontend/src/components/PlayerModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index c0df596..1d38fed 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -437,9 +437,11 @@ export default function PlayerModal({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="relative aspect-video w-full bg-black rounded-t-2xl overflow-hidden">
-          <div ref={mountRef} className="w-full h-full" />
+          {/* Hide the iframe entirely on error so YouTube's own error screen can't bleed
+              through our overlay. */}
+          <div ref={mountRef} className={`w-full h-full ${playerError != null ? "invisible" : ""}`} />
           {playerError != null && (
-            <div className="absolute inset-0 grid place-items-center bg-bg/95 p-6 text-center">
+            <div className="absolute inset-0 grid place-items-center bg-bg p-6 text-center">
               <div className="max-w-sm">
                 <AlertTriangle className="w-8 h-8 text-amber-500 mx-auto mb-3" />
                 <h3 className="text-base font-semibold">{t("player.unavailableTitle")}</h3>