how are u?
I am trying to make a single button for play/mute process for youtube iframe in wordpress header...
<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");
}
});
but it doesn't work for me, could you help me with this
Maybe this helps?: 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>
reference link : https://codepen.io/rno1d/pen/XzLKwj
It's work for me, Thanks!
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>