Background video sound on/off

Design help Custom code
1

Hi guys I am working on this website mockup for a potential client. Is there a way to turn the sound off/on on the background video by clicking the sound icon? If webflow can’t do this natively is there a workaround? It’s for a potential movie site so the audio in the background is helpful. Or at this stage should I separate the audio and video and control the audio with a separate html 5 ?? I’m just worried about sync issues for the actual video

Any thoughts much appreciated.

thanks
Jeremy

to see the full functioning site thus far http://incursion.webflow.io because there is a dynamic slider that only shows up on the published site.

Here is my public share link: https://preview.webflow.com/preview/incursion?preview=094afd09714c7f1de5f28ddbe7846251

1 Like
2

Waow you should be worried abt sync, manual sync is a nightmare!

Ok so you should use JS to mute the sound at the DOM level. If that’s the only sound of the page, this should be the cleanest, most obvious method HTML Audio/Video DOM muted Property

3

Can I use that to mute/un-mute on click somehow?

That would mute it automatically correct?

4

Yes I think so. sorry I’m not skilled enough in JS to give a good advice on how to bring it to a click… I was pointing to the general solution.

5

Appreciate it Vincent thanks. Looks like I’ll have to find a work around for this one too.

6

Any code experts wanna give a hand here. I am halfway there. I have the html5 video embedded. I have a button to mute/unmute but they are not wanting to play well together. So obviously I am missing the mark

here is my share link. any help would be much appreciated

https://preview.webflow.com/preview/backgroundvideo-onoff?preview=f70dd38ea787182ced489a5f5098a723

7

Ok figuring out more of a piece here. I can mute/unmute the background video using code. to apply to whole video element. But I need to specify it to an element id. Because I will have other videos trailers ect on the site and do not want the script to interfere with these other video elements. i have tried using #background-video as an id selector but does not seem to effect it.

8

Hey @jbleroux, I had a similar problem recently for a little site I made http://prince.webflow.io.

What I did was import the video in imovie (or any video editor), muted the sound, exported to mp4 and uploaded to Webflow.

Simples. No point in messing around with code and it only takes 1-2 minutes.

9

Yeah that is fine I know how to remove sound from a video. But what I want to do is the ability to turn sound on off by the click of a button. Say a background video of movie clips or whatever that the viewer can turn on or off the audio on. I got it working with the video portion. for the whole site. But if I don’t narrow it down to an element. I’m going to have two videos playing sound simultaneously. Because it will effect all the video on the page.

10

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