Unmute audio of background video with a button (mobile)

Design help Custom code
1

Hello everyone,

In my current project, I am using a background video on tablet and mobile devices. I want to create a button that allows users to turn the sound of the background video on - and off. I have read many posts regarding this topic, but none of the solutions seem to work for me (because I’m quite new to Webflow and I don’t understand coding that well).

In this post (Code needed to toggle background video sound), @pixelgeek gives the perfect solution, but still it doesn’t work for me. What am I doing wrong? I have given the button id=‘sound’ and entered the js code given by @pixelgeek into the before body tag. Can someone please give me a step-by-step solution?

In the project, I am not using an actual button, but a div element that has 100vw and 100vh, because I want the user to be able to press anywhere on the screen to turn the audio on - and off.

Here is my site Read-Only: LINK

2

Hi Ada, welcome to the forums. Two things I noticed i don’t see an ID for the sound button image|244x391 Maybe you had it and removed it.
You may also want to make the sound target smaller so that the actual button for your call to action can be clicked. You can also increase the Z index for that CTA button. To keep it clickable. But currently you will be unable to click the call to action button because the Sound Button Div is above it.

3

There is also a new video in webflow university
Built-in toggle on background videos | Webflow University maybe this will help