Video Background Sound Mute/Unmute Dilemma

Support
#1

Hi, so i want to upload a video that has sound and use it as the main background. I’m using Pro, and i was wondering since upon uploading it in the header section, if the video will be muted by default, also if it will run on mobile, it being muted. So if it is muted by default i am wondering if i can use this code on in the global theme js, so that i can make a mute/unmute speaker button that changes the state of the sound :

       var button = document.getElementById('unmute');
    button.onclick = function (){
        video.muted = true;
    };

var button = document.getElementById('unmute');
    button.onclick = function (){

   if (video.muted === true) {    
       video.muted = false;
    }

    else {
        video.muted = true;
    }

    };
#2

Hello Alexandru,

Thanks for writing in!

By default, a background video will always be muted. It is just a background video which is for basically for aesthetics, so it does not make sense to have any audio or controls to play or pause the video. And then, on mobile, the background video will not be played and will just be replaced with a poster image.

If you want to have a full control over the video and if your video is really has a big emphasis on the content, then you must use the video element instead. This way, you and your users when viewing the page can play or pause the video including to mute, increase or decrease the volume while playing the video.

To learn more about the video element that you can add in your page, please check this out:

#3

I understand that, but my question is regards the video if i can use a custom js to make a button that unmutes ands mutes back up. Are there any classes or id’s assigned to these in pro, if so i would really like to be able to know how they are called so i can make a custom js and insert it into the themes general js option in pro.

#4

Hello Alexandru,

What you have in mind is beyond the scope of our support. Please be advised that our support only covers getting your site setup, bug fixes and minor cosmetic changes. Any coding should be directed to a 3rd party developer if you are not comfortable with coding. As for your question for the classes or IDs added in the background video, yes there are classes added to it. You will have to figure out those classes on your own. If you are interested to learn more about CSS selectors used in the background video, you can always find them by checkout the Google Chrome Dev Tools. Perhaps this video tutorial will help you:

Hope this helps.

#5

Look i’m not telling you to code for me, and i know how to use Chrome Tools for Inspection but all i wanted was the classes or id’s your theme uses for video so i can link it to my js and css. So i really do think this is in the scope of the support as i am just asking for code that is already used in the theme itself and not made by me. And since your theme has so many classes it’s kinda confusing for people to tell what to even use.
So i’m asking again what class can i use for my js and css to make my own video customization.

video_control_class
video_control_class1163×195 13.9 KB

#6

Hello Alexandru,

Given the selectors displayed in the Chrome DevTool, you can choose the closest CSS Selector of the video.

.x-bg video or .x-bg .x-bg-layer-lower-video video or .x-bg .x-video video depending on what will work for your JS code.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.