popup is not playing

components/youtube-modal.js

@@ -114,24 +114,28 @@ position: fixed;
   setupEventListeners() {
     this.modal = this.shadowRoot.getElementById('youtube-modal');
     this.closeBtn = this.shadowRoot.getElementById('modal-close-btn');
-this.backdrop = this.shadowRoot.getElementById('youtube-modal-backdrop');
-    // Use inline SVG instead of feather icons for better reliability
-if (this.closeBtn) {
+    this.backdrop = this.shadowRoot.getElementById('youtube-modal-backdrop');
+
+    if (this.closeBtn) {
       this.closeBtn.addEventListener('click', () => this.close());
     }
     
     if (this.backdrop) {
-      this.backdrop.addEventListener('click', () => this.close());
+      this.backdrop.addEventListener('click', (e) => {
+        if (e.target === this.backdrop) {
+          this.close();
+        }
+      });
     }
     
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' && this.isOpen) {
+        e.preventDefault();
         this.close();
       }
     });
-}
-
-  static get observedAttributes() {
+  }
+static get observedAttributes() {
     return ['video-id'];
   }
 
@@ -144,29 +148,32 @@ if (this.closeBtn) {
     }
   }
   open(videoId) {
-    if (!videoId || this.isOpen) return;
+    if (!videoId) return;
     
     this.activeVideoId = videoId;
     const iframe = this.shadowRoot.getElementById('youtube-iframe');
-    iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&enablejsapi=1`;
+    if (iframe) {
+      iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`;
+    }
     
     this.modal.classList.add('active');
     document.body.style.overflow = 'hidden';
     document.documentElement.style.overflow = 'hidden';
     this.isOpen = true;
   }
-close() {
+
+  close() {
     if (!this.isOpen) return;
     
     const iframe = this.shadowRoot.getElementById('youtube-iframe');
     if (iframe) {
-      // Stop the video first
-      iframe.src = iframe.src.replace(/[\?&]autoplay=1/, '') + '&autoplay=0';
+      iframe.src = '';
     }
+    
     this.modal.classList.remove('active');
     document.body.style.overflow = '';
     document.documentElement.style.overflow = '';
-this.isOpen = false;
+    this.isOpen = false;
   }
 }