É comum que a reprodução automática de vídeos em plataformas como o Facebook ocorra com o som desativado. Isso evita interrupções e permite que os usuários naveguem sem serem surpreendidos por áudios indesejados. Se você deseja incorporar um vídeo do YouTube em seu site com essa mesma funcionalidade, ou seja, que inicie mudo, existe uma solução simples.
Com um pequeno script desenvolvido por Amit Agarwal, do Labnol, é possível incorporar vídeos do YouTube que iniciam a reprodução automaticamente, mas com o áudio silenciado. Assim, os visitantes do seu site terão a opção de ativar o som manualmente, caso desejem.
Passo a Passo para a Incorporação
Primeiramente, localize o vídeo do YouTube desejado e obtenha o seu ID. O ID é uma sequência de caracteres alfanuméricos que se encontra na URL do vídeo, após a parte “https://www.youtube.com/watch?v=”. Copie este identificador.
O código a seguir é o que você precisa para incorporar o vídeo. No trecho onde está escrito ‘YOUR_VIDEO_ID’, substitua pelo ID que você copiou no passo anterior:
<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
width: 560, // Largura do player (em px)
height: 316, // Altura do player (em px)
playerVars: {
autoplay: 1, // Inicia a reprodução automaticamente
controls: 1, // Exibe os controles de reprodução
showinfo: 0, // Oculta o título do vídeo
modestbranding: 1, // Oculta o logo do YouTube
loop: 1, // Repete o vídeo em loop
fs: 0, // Oculta o botão de tela cheia
cc_load_policty: 0, // Oculta as legendas
iv_load_policy: 3, // Oculta as anotações
autohide: 0 // Mantém os controles visíveis durante a reprodução
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
// Escrito por @labnol
</script>
Ao utilizar este código, o vídeo do YouTube será incorporado com o som desativado por padrão. A imagem abaixo ilustra como ele aparecerá em seu site:
Importante ressaltar que este método não funcionará para vídeos que possuem restrições de incorporação, mas será eficaz na grande maioria dos casos.
Para mais informações, você pode consultar Labnol.