.post.video { position: relative; overflow: hidden; } .aspect-9-16 { position: relative; width: 100%; } .post.video .play-area { position: absolute; inset: 0; /* cubre todo el contenedor */ z-index: 1000; /* encima de todo */ cursor: pointer; /* indica que es clickeable */ } .iframe-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .iframe-wrapper iframe { width: 100% !important; height: 100% !important; } /* Por defecto el ícono play es visible */ .post.video .play-area .play { opacity: 1; transition: opacity 0.3s ease; } /* Cuando el video está reproduciéndose */ .post.video .aspect-9-16.short ~ .play-area .play, .post.video .video-container.short ~ .play-area .play { opacity: 0; pointer-events: none; } .post.video .aspect-9-16.short ~ .post-content, .post.video .video-container.short ~ .post-content { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } let players = {}; let currentPlayer = null; function onYouTubeIframeAPIReady() { initVideoPosts(); } function initVideoPosts() { document.querySelectorAll('.post.video').forEach((post, index) => { const videoId = post.getAttribute('data-video-id'); const playBtn = post.querySelector('.play-area'); const container = post.querySelector('.video-container') || post.querySelector('.aspect-9-16') || post; const ensureFreshPlayer = () => { const p = players[index]; if (p && typeof p.getIframe === 'function') { const iframe = p.getIframe(); if (iframe && iframe.isConnected) return p; } if (players[index]) { try { players[index].destroy(); } catch (e) {} } players[index] = null; return null; }; const applyPlayingState = () => { container.classList.remove('gradient'); container.classList.add('short'); if (playBtn) playBtn.style.pointerEvents = 'none'; }; const applyIdleState = () => { container.classList.add('gradient'); container.classList.remove('short'); const wrapper = container.querySelector('.iframe-wrapper'); if (wrapper) wrapper.remove(); if (players[index]) { try { players[index].destroy(); } catch (e) {} players[index] = null; } if (playBtn) playBtn.style.pointerEvents = ''; if (currentPlayer && (!players[index] || currentPlayer === players[index])) { currentPlayer = null; } }; let shouldPlayOnReady = false; playBtn?.addEventListener('click', (e) => { e.preventDefault(); ensureFreshPlayer(); const existing = players[index]; if (existing) { if (currentPlayer && currentPlayer !== existing) currentPlayer.pauseVideo(); applyPlayingState(); existing.playVideo(); currentPlayer = existing; return; } let wrapper = container.querySelector('.iframe-wrapper'); if (!wrapper) { wrapper = document.createElement('div'); wrapper.className = 'iframe-wrapper'; wrapper.id = `player-${index}`; container.appendChild(wrapper); } else { wrapper.id = `player-${index}`; } shouldPlayOnReady = true; applyPlayingState(); players[index] = new YT.Player(wrapper.id, { videoId, playerVars: { autoplay: 1, rel: 0, modestbranding: 1, playsinline: 1 }, events: { onReady: (ev) => { if (shouldPlayOnReady) { if (currentPlayer && currentPlayer !== ev.target) currentPlayer.pauseVideo(); ev.target.playVideo(); currentPlayer = ev.target; shouldPlayOnReady = false; } }, onStateChange: (ev) => { if (ev.data === YT.PlayerState.PLAYING) { if (currentPlayer && currentPlayer !== ev.target) currentPlayer.pauseVideo(); currentPlayer = ev.target; applyPlayingState(); } if (ev.data === YT.PlayerState.PAUSED || ev.data === YT.PlayerState.ENDED) { applyIdleState(); } }, onError: () => { applyIdleState(); } } }); }); }); } if (!window.YT || !window.YT.Player) { const s = document.createElement('script'); s.src = 'https://www.youtube.com/iframe_api'; document.head.appendChild(s); } else { onYouTubeIframeAPIReady(); }