</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function() { video.play().catch(function(error) { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function() { if (video.paused) { video.play(); } }, 100); // Toggle play/pause ao clicar no vídeo container.addEventListener('click', function(e) { // Não fazer nada se clicar no botão de som if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', function() { pauseOverlay.classList.remove('show'); }); video.addEventListener('pause', function() { pauseOverlay.classList.add('show'); }); // Toggle som ao clicar no botão soundButton.addEventListener('click', function(e) { e.stopPropagation(); // Evitar que o clique pause o vídeo if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function() { video.play().catch(function(error) { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function() { if (video.paused) { video.play(); } }, 100); // Toggle play/pause ao clicar no vídeo container.addEventListener('click', function(e) { // Não fazer nada se clicar no botão de som if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', function() { pauseOverlay.classList.remove('show'); }); video.addEventListener('pause', function() { pauseOverlay.classList.add('show'); }); // Toggle som ao clicar no botão soundButton.addEventListener('click', function(e) { e.stopPropagation(); // Evitar que o clique pause o vídeo if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function () { video.play().catch(function () { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function () { if (video.paused) video.play(); }, 100); // Toggle play/pause ao clicar no vídeo (exceto no botão de som) container.addEventListener('click', function (e) { if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', () => pauseOverlay.classList.remove('show')); video.addEventListener('pause', () => pauseOverlay.classList.add('show')); // Toggle som soundButton.addEventListener('click', function (e) { e.stopPropagation(); if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function () { video.play().catch(function () { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function () { if (video.paused) video.play(); }, 100); // Toggle play/pause ao clicar no vídeo (exceto no botão de som) container.addEventListener('click', function (e) { if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', () => pauseOverlay.classList.remove('show')); video.addEventListener('pause', () => pauseOverlay.classList.add('show')); // Toggle som soundButton.addEventListener('click', function (e) { e.stopPropagation(); if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function() { video.play().catch(function(error) { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function() { if (video.paused) { video.play(); } }, 100); // Toggle play/pause ao clicar no vídeo container.addEventListener('click', function(e) { // Não fazer nada se clicar no botão de som if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', function() { pauseOverlay.classList.remove('show'); }); video.addEventListener('pause', function() { pauseOverlay.classList.add('show'); }); // Toggle som ao clicar no botão soundButton.addEventListener('click', function(e) { e.stopPropagation(); // Evitar que o clique pause o vídeo if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
</video> <button class="sound-button" id="soundButton">🔇 Ativar Som</button> <div class="pause-overlay" id="pauseOverlay"> <div class="pause-icon"></div> </div> </div> <script> const video = document.getElementById('video-player'); const container = document.getElementById('videoContainer'); const pauseOverlay = document.getElementById('pauseOverlay'); const soundButton = document.getElementById('soundButton'); // Garantir que o vídeo comece tocando video.addEventListener('loadedmetadata', function() { video.play().catch(function(error) { console.log('Aguardando interação do usuário para autoplay'); }); }); // Forçar play inicial setTimeout(function() { if (video.paused) { video.play(); } }, 100); // Toggle play/pause ao clicar no vídeo container.addEventListener('click', function(e) { // Não fazer nada se clicar no botão de som if (e.target === soundButton) return; if (video.paused) { video.play(); pauseOverlay.classList.remove('show'); } else { video.pause(); pauseOverlay.classList.add('show'); } }); // Sincronizar overlay com estado real do vídeo video.addEventListener('play', function() { pauseOverlay.classList.remove('show'); }); video.addEventListener('pause', function() { pauseOverlay.classList.add('show'); }); // Toggle som ao clicar no botão soundButton.addEventListener('click', function(e) { e.stopPropagation(); // Evitar que o clique pause o vídeo if (video.muted) { video.muted = false; soundButton.textContent = '🔊 Som Ativado'; soundButton.classList.add('active'); } else { video.muted = true; soundButton.textContent = '🔇 Ativar Som'; soundButton.classList.remove('active'); } }); </script> </body> </html> <script type="module"> let height = 0 function sendEmbedHeight() { window.parent.postMessage({ embedHeight: height }, "*") } const observer = new ResizeObserver((entries) => { if (entries.length !== 1) return const entry = entries[0] if (entry.target !== document.body) return height = entry.contentRect.height sendEmbedHeight() }) observer.observe(document.body) window.addEventListener("message", (event) => { if (event.source !== window.parent) return if (event.data !== "getEmbedHeight") return sendEmbedHeight() }) </script> <body> </html> ">
Create a free website with Framer, the website builder loved by startups, designers and agencies.
