Tag: Custom Video

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";
}