¿cómo estás?
Estoy tratando de hacer un solo botón para el proceso de reproducción/silencio para el iframe de youtube en el encabezado de wordpress...
<iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="2000" height="1200" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&loop=1&modestbranding=1&playsinline=1&rel=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fepistolariodelamemoria.cl&widgetid=1" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe> <div id="mute"> </div>JS
$("#mute").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"); } });pero no me funciona me podrian ayudar con esto
¿Quizás esto ayude?: https://stackoverflow.com/a/26478263/17135631
$("video").prop('muted', true); $(".mute-video").click(function () { if ($("video").prop('muted')) { $("video").prop('muted', false); $(this).addClass('unmute-video'); } else { $("video").prop('muted', true); $(this).removeClass('unmute-video'); } console.log($("video").prop('muted')) });js :
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('youtube-video', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady() { console.log("hey Im ready"); //do whatever you want here. Like, player.playVideo(); } function onPlayerStateChange() { console.log("my state changed"); } document.getElementById("mute").addEventListener('click', function(event) { console.log(player); if (player.isMuted()) { player.unMute(); } else { player.mute(); } });html :
<h1>Mute Youtube Video Using a Button</h1> <p> <button id="mute">Mute/UnMute</button> </p> <iframe id="youtube-video" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&autoplay=1&rel=0&mute=0" frameborder="0" width="600" height="400"></iframe>enlace de referencia: https://codepen.io/rno1d/pen/XzLKwj
Es trabajo para mí, gracias!
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('wp-custom-header-video', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady() { console.log("hey Im ready"); //do whatever you want here. Like, player.playVideo(); } function onPlayerStateChange() { console.log("my state changed"); } document.getElementById("mute").addEventListener('click', function(event) { console.log(player); if (player.isMuted()) { player.unMute(); } else { player.mute(); } }); #mute { cursor:pointer; padding: 10px 20px; background:#000; color: #fff; border-radius: 4px; display: inline-block; } <p> <button id="mute">Mute/UnMute</button> </p> <iframe id="wp-custom-header-video" name="video-wp" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="600" height="400" src="https://www.youtube.com/embed/4vGzJ3nTzp4?autoplay=1&controls=0&disablekb=1&fs=0&iv_load_policy=3&loop=1&modestbranding=1&playsinline=1&rel=0&showinfo=0&enablejsapi=1&widgetid=1;origin=https%3A%2F%2Fepistolariodelamemoria.cl&" data-gtm-yt-inspected-1_19="true" data-initial-width="2000" data-initial-height="1200"></iframe>