Video sound header

Hello,

Is it possible to hear the audio from the video in header? if so how?

Thank

Best Regards,

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Open the js/main.js file. Then copy the whole content of it
  2. Open the the js/main.min.js file. Remove the whole content, then paste here. So the code is more readable now
  3. Go to the following lines:

var muteVideo = function() {
	$('.video-container video').prop('muted', true);
}

  1. Change true to false
  2. Minify the script here http://jscompress.com/
  3. Save changes, then update via FTP or cPanel

Let me know how it goes.

As you are editing the core theme’s file, you should take it at your own risk. You will loose the changes once the theme gets updated in the future.

Regards,
Kharis

yesssss

thank

How on earth you didn’t make a mute button for the public to press themselves is beyond me. Please let me know if you actually have and I missed something.

Thanks.

Dear Kharis

Hi, I work with Sydney and Sydney child theme. how can i enable sound on video?
the second question is that how can i on-off the sound by an icon on the video?

best regards
Kourosh Narian

Hello there,

Try to follow the solution posted in this topic, please.

Regards,
Kharis

Dear Kharis

Hello again and thanks for reply. I saw the topic but there is several problems:

  1. I used Sydney theme not West , West pro or Sydney Pro.
  2. In Sydney, I found 3 js folder in “wp-Include”, “wp-admin” and “wp-contents” wordpress folders. I have only found “scripts.js” file in the “\wp-content\themes\sydney\js” folder but there is no any “scripts.min.js file” in this folder.
  3. there is no any:
    var muteVideo = function() {
    $(’.video-container video’).prop(‘muted’, true);
    }
    in main.js or script.js
  4. The last how can we use an icon for mute and unmute the sound on the video ? (like pause and play that exist now).

have a nice day
Kourosh

Dear Kharis

Hello. The problem is solved. I found it from one of your posts about this issue. I have only added the following code to Custom JavaScript:

    jQuery(function($) {

          $(window).on('load', function() {
            $('.wp-custom-header video').prop('muted', false);
          });

    });

Thanks a lot. The only questions is that:

  1. how can I show an icon for ON-OFF the sound?
  2. Now we have an icon for pause-play the video. can we show the Sound On-Off next to this icon?
  3. How can we change the positions of these icons? for example change the positions of these two icons to Top-Left or Top-Right of the header video?

Thank you so much for your help
Kourosh

Hello there,

To add mute/unmute video sound, try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (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 = '<i class="fa fa-volume-up"></i>';

              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);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .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";
    }

Clear any applied cache, as it usually blocks recent code addition to take immediate effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

1 Like

Hello,
I have the Sydney Pro II version and I have the same problem proposed in this post …
I followed the procedure indicated …
I deleted the cache using ccleaner …
but it does not change anything …
can you help me please.
Thank you

Do you have a link to your site you can share here, so I can check?

Regards,
Kharis

Dear Kharis

Hi, Thanks a lot for ur help. All things run perfectly. I only encounter with a problem. Sometimes the video do not play automatically and I have to click the play button to start the video. How can i solve this problem?

Thanks again for your professional advice
have a nice day
Kourosh

Hello there,

What type of video do you use? Is that YouTube? Please share a link to your site, so I can take a look.

Regards,
Kharis

Hello There
I upload my video in Media location and set it in the Header Media. Now I develop this site in localhost on my pc.

Thanks
Kourosh

Hello Kourosh,

Is the file size of the video more than 8MB? Please consider lighter one as recommended in this Make post.

Regards,
Kharis

Hello.
I tried to use that but the button doesn’t appear
Could you please help me? :disappointed_relieved:
Here is my page
http://academia.uaa.mx/eq65c :sweat_smile:

Works perfectly on uploaded video. Thank you!!!