Update static/index.html

static/index.html

@@ -397,24 +397,42 @@ pin.addEventListener('keydown', (e) => {
 overlay.appendChild(pin);
 
 
-      if (it.open){
-        const pop = document.createElement('div'); pop.className='popup';
-        pop.style.left = it.x+'%'; pop.style.top = it.y+'%'; pop.style.width = it.widthPct+'vw';
-
-        const header = document.createElement('header');
-        const h4 = document.createElement('h4'); h4.textContent = it.title || (it.type==='image'?'Image':'Video');
-        const close = document.createElement('button'); close.className='x'; close.innerHTML='×';
-        close.addEventListener('click', e=>{ e.stopPropagation(); it.open=false; renderItems(); });
-        header.append(h4, close); pop.appendChild(header);
-
-        const wrap = document.createElement('div'); wrap.className='media';
-        if (it.type==='video'){ const v = document.createElement('video'); v.src=it.src; v.controls=true; v.playsInline=true; wrap.appendChild(v); }
-        else { const img = document.createElement('img'); img.src=it.src; img.alt=it.title||'Image'; wrap.appendChild(img); }
-        pop.appendChild(wrap);
-
-        overlay.appendChild(pop);
-        requestAnimationFrame(()=>adjustPopupPosition(pop));
-      }
+if (it.open){
+  const pop = document.createElement('div');
+  pop.className = 'popup';
+  pop.style.left = it.x + '%';
+  pop.style.top  = it.y + '%';
+  pop.style.width = it.widthPct + 'vw';
+
+  // Media wrapper — clicking anywhere on the small image/video closes it
+  const wrap = document.createElement('div');
+  wrap.className = 'media';
+  wrap.addEventListener('click', (e) => {
+    e.stopPropagation();
+    it.open = false;
+    renderItems();
+  });
+
+  if (it.type === 'video') {
+    const v = document.createElement('video');
+    v.src = it.src;
+    v.playsInline = true;
+    v.muted = true;          // no controls; click closes
+    v.autoplay = false;
+    v.loop = false;
+    wrap.appendChild(v);
+  } else {
+    const img = document.createElement('img');
+    img.src = it.src;
+    img.alt = it.title || '';
+    wrap.appendChild(img);
+  }
+
+  pop.appendChild(wrap);
+  overlay.appendChild(pop);
+  requestAnimationFrame(() => adjustPopupPosition(pop));
+}
+
     }
 
     // items list