How can I make my unmute button function on my video?

kapooraayan1
Excursionist
37 0 7

 

I am trying to add a button on the video that will unmute the video when a visitor taps on it. After so much research and learning using videos and articles, I created this code and added it to the video, it shows the button but doesn't function to unmute the video.

 

Can someone help me and review this code or have any suggestions on how to achieve this task? 

 

Webite

 

 

<video class="beae_video" controls="" style="display: flex !important; aspect-ratio: 16 / 9;" autoplay loop playsinline><source src="https://cdn.shopify.com/videos/c/o/v/c18fd2876cc14ee88b9b82f6668e5c1b.mp4#t=,"></video>

</div>
<div id="sound_button" style="position:fixed; top:120px; left:70%; margin-left:-20px; display:flex; align-items:center; justify-content:center; width:200px; height:40px; border:2px solid; border-radius:100px; border-color:black; cursor: pointer;">

<h2>Tap to Unmute</h2>

</div>

<script>

        var video = document.getElementById("beae_video");

        video.muted = true;
        function mute() {
          if (video.muted === false) {     
            video.muted = true;
          }
          else {     
          video.muted = false;
          }
        }
        document
     
.getElementById("sound_button")
.addEventListener("click", mute); 
</script>

 

 

Replies 3 (3)

PageFly-Oliver
Astronaut
878 190 171

Hi @kapooraayan1 ,

You can try my code

 

<video class="beae_video" controls="" style="display: flex !important; aspect-ratio: 16 / 9;" autoplay loop playsinline><source src="https://cdn.shopify.com/videos/c/o/v/c18fd2876cc14ee88b9b82f6668e5c1b.mp4#t=,"></video>

</div>
<div id="sound_button" style="position:fixed; top:120px; left:70%; margin-left:-20px; display:flex; align-items:center; justify-content:center; width:200px; height:40px; border:2px solid; border-radius:100px; border-color:black; cursor: pointer;">

<h2>Tap to Unmute</h2>

</div>

<script>

        var video = document.querySelector(".beae_video");

        video.muted = true;
        function mute() {
          if (video.muted === false) {     
            video.muted = true;
            video.play()
          }
          else {     
          video.muted = false;
          video.play()
          }
        }
     
document.getElementById("sound_button").addEventListener("click", mute()); 
</script>

 

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

kapooraayan1
Excursionist
37 0 7

Thanks for your reply. however, the code you provided isn't working.

kapooraayan1
Excursionist
37 0 7

@PageFly-Oliver  Can we fix the control options like play, mute, timeline slider and it always be visible on the video?