Loosen source queries and replace Google embed

frontend/app.js

@@ -46,6 +46,9 @@ const resultModalFrame = document.getElementById("resultModalFrame");
 const resultModalMediaFrame = document.getElementById("resultModalMediaFrame");
 const resultModalVideo = document.getElementById("resultModalVideo");
 const resultModalThumbnail = document.getElementById("resultModalThumbnail");
+const resultModalGooglePanel = document.getElementById("resultModalGooglePanel");
+const resultModalGoogleImage = document.getElementById("resultModalGoogleImage");
+const resultModalGoogleText = document.getElementById("resultModalGoogleText");
 const resultModalOpenExternal = document.getElementById("resultModalOpenExternal");
 const resultModalDownload = document.getElementById("resultModalDownload");
 const closeResultModal = document.getElementById("closeResultModal");
@@ -59,6 +62,9 @@ const resultModalReady = Boolean(
   resultModalMediaFrame &&
   resultModalVideo &&
   resultModalThumbnail &&
+  resultModalGooglePanel &&
+  resultModalGoogleImage &&
+  resultModalGoogleText &&
   resultModalOpenExternal &&
   resultModalDownload &&
   closeResultModal,
@@ -407,10 +413,13 @@ function resetResultModalMedia() {
   resultModalVideo.pause();
   detachVideoSource(resultModalVideo);
   resultModalThumbnail.removeAttribute("src");
+  resultModalGoogleImage.removeAttribute("src");
+  resultModalGoogleText.textContent = "";
   resultModalMediaFrame.style.aspectRatio = "";
   setHidden(resultModalFrame, true, "");
   setHidden(resultModalVideo, true, "");
   setHidden(resultModalThumbnail, true, "");
+  setHidden(resultModalGooglePanel, true, "flex");
 }
 
 function showResultModalFrame(src) {
@@ -435,6 +444,13 @@ function showResultModalThumbnail(src, alt) {
   setHidden(resultModalThumbnail, false, "");
 }
 
+function showResultModalGooglePanel(item) {
+  resultModalGoogleImage.src = item.thumbnailUrl || PREVIEW_PLACEHOLDER;
+  resultModalGoogleImage.alt = item.title || "";
+  resultModalGoogleText.textContent = item.snippet || item.reason || "YouTube 페이지 열기 또는 Direct Download를 사용할 수 있습니다.";
+  setHidden(resultModalGooglePanel, false, "flex");
+}
+
 function renderResults(results) {
   searchResults.innerHTML = "";
   if (!results.length) {
@@ -512,7 +528,7 @@ function openResultModal(item) {
   resultModalDownload.classList.toggle("hidden", !canDirectDownload);
   resetResultModalMedia();
   if (item.source === "Google Video") {
-    showResultModalFrame(buildResultModalEmbedURL(item));
+    showResultModalGooglePanel(item);
   } else {
     showResultModalFrame(item.link || "about:blank");
   }

frontend/index.html

@@ -166,6 +166,17 @@
             <iframe id="resultModalFrame" class="hidden h-full w-full bg-white" referrerpolicy="no-referrer" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>
             <video id="resultModalVideo" class="hidden h-full w-full bg-black object-contain" controls playsinline></video>
             <img id="resultModalThumbnail" class="hidden h-full w-full object-contain" alt="" />
+            <div id="resultModalGooglePanel" class="hidden h-full w-full items-center justify-center bg-[radial-gradient(circle_at_top,#24344a,transparent_55%),linear-gradient(180deg,#0f1724,#05070b)] p-6">
+              <div class="flex w-full max-w-3xl flex-col gap-5">
+                <div class="overflow-hidden rounded-2xl border border-white/10 bg-black/40">
+                  <img id="resultModalGoogleImage" class="aspect-video w-full object-cover" alt="" />
+                </div>
+                <div class="flex flex-col gap-3 rounded-2xl border border-white/10 bg-white/[0.04] p-5 text-left">
+                  <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Google Video</p>
+                  <p id="resultModalGoogleText" class="text-sm leading-7 text-zinc-200"></p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="grid gap-5 px-5 py-5 lg:grid-cols-[1.6fr_0.8fr]">
@@ -202,6 +213,6 @@
       </button>
     </template>
 
-    <script src="/app.js?v=20260316f" defer></script>
+    <script src="/app.js?v=20260316g" defer></script>
   </body>
 </html>