How to toggle mute/unmute on load or on custom button click a youtube video added via iframe ?
I need to autoplay a youtube video with sound on page load.
Here is the 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>
Found the snippet bellow on this link https://yootheme.com/support/question/113708
I added the iframe_api to the page <script src="https://www.youtube.com/iframe_api"></script>
Then i used the function bellow for player settings :
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>
Play button script
$('.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');
}
});
And no console errors are displayed. Maybe i should also remove the mute=1 ?