fix: popup iframe loading - async src, loader timeout, fallback to new tab

static/yt_live.js

@@ -164,7 +164,8 @@
   .vtv-popup-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#111;border-bottom:1px solid #333}
   .vtv-popup-title{font-size:14px;font-weight:700;color:#00ccff}
   .vtv-popup-close{background:#333;border:none;color:#fff;font-size:18px;width:32px;height:32px;border-radius:6px;cursor:pointer}
-  .vtv-popup-frame{flex:1;position:relative;background:#000;min-height:0}
+  .vtv-popup-frame{flex:1;position:relative;background:#000;min-height:300px}
+  .vtv-popup-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
   .vtv-popup-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
   .vtv-popup-loader{display:flex;align-items:center;justify-content:center;height:280px;color:#00ccff;font-size:12px;flex-direction:column;gap:8px}
   .vtv-popup-btn{background:#1a2a3a;border:1px solid #2a3a4a;color:#8ab4d8;font-size:9px;padding:3px 8px;border-radius:6px;cursor:pointer;margin-left:4px}
@@ -868,9 +869,7 @@
           <span class="vtv-popup-title" id="vtv-popup-title">📺 VTV Player</span>
           <button class="vtv-popup-close" id="vtv-popup-close">✕</button>
         </div>
-        <div class="vtv-popup-frame" id="vtv-popup-frame">
-          <div class="vtv-popup-loader" id="vtv-popup-loader"><div class="vtv-spinner"></div>Đang tải...</div>
-        </div>
+        <div class="vtv-popup-frame" id="vtv-popup-frame"></div>
       `;
       document.body.appendChild(popup);
       document.getElementById('vtv-popup-close').onclick = closeVtvPopup;
@@ -881,14 +880,35 @@
     if (hdr) hdr.style.display = hideHeader ? 'none' : 'flex';
     document.getElementById('vtv-popup-title').textContent = title || '📺 VTV Player';
     const frame = document.getElementById('vtv-popup-frame');
-    frame.innerHTML = '<div class="vtv-popup-loader" id="vtv-popup-loader"><div class="vtv-spinner"></div>Đang tải...</div>';
     
+    // Show loader
+    frame.innerHTML = '<div class="vtv-popup-loader" id="vtv-popup-loader"><div class="vtv-spinner"></div>Đang tải player...</div>';
+    
+    // Use iframe but handle blocked embeds gracefully
     const iframe = document.createElement('iframe');
-    iframe.src = popupUrl;
-    iframe.onload = () => { const l = document.getElementById('vtv-popup-loader'); if(l) l.style.display='none'; };
-    iframe.onerror = () => { window.open(popupUrl, '_blank'); closeVtvPopup(); };
+    iframe.id = 'vtv-popup-iframe';
+    iframe.setAttribute('allowfullscreen', 'true');
+    iframe.setAttribute('webkitallowfullscreen', 'true');
+    iframe.setAttribute('mozallowfullscreen', 'true');
+    iframe.setAttribute('allow', 'autoplay; encrypted-media; fullscreen');
+    iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;display:none';
+    
+    // Timeout to detect blocked iframe (onload fires even for blocked, so use timeout)
+    let loaded = false;
+    iframe.onload = () => { loaded = true; const l = document.getElementById('vtv-popup-loader'); if(l) l.style.display='none'; iframe.style.display = 'block'; };
     frame.appendChild(iframe);
     popup.classList.add('show');
+    
+    // Set src after append to ensure events fire
+    setTimeout(() => { iframe.src = popupUrl; }, 50);
+    
+    // If still not loaded after 4s, fallback to new window
+    setTimeout(() => {
+      if (!loaded && popup.classList.contains('show')) {
+        window.open(popupUrl, '_blank');
+        closeVtvPopup();
+      }
+    }, 4000);
   }
   
   // Open TS token URL in popup