¿Cómo alternar silenciar/activar el sonido al cargar o en un botón personalizado, haga clic en un video de YouTube agregado a través de iframe?
Necesito reproducir automáticamente un video de YouTube con sonido al cargar la página.
Aquí está el iframe:
<div class="video-container"> <iframe id="player" class="video" src="https://www.youtube.com/embed/'.$vid_id.'?autoplay=1&controls=0&loop=1&mute=1&playlist='.$vid_id.'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
Encontré el fragmento a continuación en este enlace https://yootheme.com/support/question/113708
Agregué iframe_api a la página <script src="https://www.youtube.com/iframe_api"></script>
Luego usé la siguiente función para la configuración del reproductor:
jQuery(function(){jQuery('.video-container iframe').attr('id', 'player');}); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { events: { 'onStateChange': onPlayerStateChange } }); } function onPlayerStateChange() { player.unMute(); player.setVolume(80); }
<div class="video-play-btn"></div>
Guión del botón de reproducción
$('.video-play-btn').on('click', function() { var mute_toggle = $(this); if(player.isMuted()){ player.unMute(); mute_toggle.text('volume_up'); } else{ player.mute(); mute_toggle.text('volume_off'); } });
Y no se muestran errores de consola. ¿Quizás también debería eliminar el silencio = 1?