Install and activate the
TC Custom JavaScript plugin; Then go to
Appearance > Custom JavaScript; and apply this JS code:
(function($){
"use strict";
$(window).on('load', function () {
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var vidContainer = $('#wp-custom-header');
var video = $('#wp-custom-header').children('video');
if( vidContainer.length && video.length ) {
// Enable video sound
$('.wp-custom-header video').prop('muted', false);
var muteButton = document.createElement('button');
muteButton.setAttribute( 'type', 'button' );
muteButton.setAttribute( 'id', 'mute-button' );
muteButton.innerHTML = '';
document.getElementById("wp-custom-header").appendChild(muteButton);
$('#mute-button').addClass('wp-custom-header-video-button');
var muted = false;
muteButton.addEventListener("click", function() {
if (muted == false) {
// Mute the video
$('.wp-custom-header video').prop('muted', true);
$('#mute-button').addClass('muted');
muted = true;
} else {
// Unmute the video
$('.wp-custom-header video').prop('muted', false);
$('#mute-button').removeClass('muted');
muted = false;
}
});
if( isMobile.iOS() == true ) {
$('#mute-button').css('opacity', '0');
}
}
});
})(jQuery);
Add this CSS code to
Appearance > Customize > Additional CSS:
.wp-custom-header #wp-custom-header-video-button {
margin-left: -27px;
}
.wp-custom-header #mute-button {
margin-left: 27px;
}
.wp-custom-header #mute-button.muted .fa:before {
content: "\f026";
}