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

[kapooraayan1]

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 

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

[AnneLuo]

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>

[kapooraayan1]

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]

@AnneLuo Are you still working in the store?