Add a mute/unmute button named "Tap to Unmute" on the video

kapooraayan1
Excursionist
37 0 7

I have added a video on the homepage of the website and would like to add "Tap to unmute" button or any option that customers will see to unmute the video on the top left-hand corner of the video. I am using Beae NextGen Builder and added this code to the section 

 

kapooraayan1_0-1709687301727.png

 

<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>

 

with this code tried different things like adding a logo on the video and tried to add a script to mute and unmute but it's not working.

 

Can someone please look into this issue and see if that's possible?

Replies 3 (3)

AnneLuo
Shopify Partner
475 98 96

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme. liquid file and add the following code in the body of the file:

<script>
var myVideo = document.querySelector('.beae_video');
var yourButton = document.querySelector('.button_class'); // need modify the class of your button

 yourButton.addEventListener("click", function() {
        myVideo.muted = false;
    });
</script>

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
kapooraayan1
Excursionist
37 0 7

Thanks for replying. I have tried to add this code to the theme. liquid but it did not work. Any other suggestion would be appreciated.

kapooraayan1
Excursionist
37 0 7

@AnneLuo Are you still working in the store?