Streaming live at 10am (PST)

Audio Mute Button for a Background Video


#1

Hello,
So I recently made a site in Webflow for music channel Selected. I used a Video for my static page as a background, and now wanted to know if its possible to add a button to mute/unmute the audio of the video if certain users wanted to do so (kind of essential I suppose).

I used the following code to embed my video as a background:
<video autoplay loop style="width:100%; height: auto; position:absolute; z-index: -1;">
<source src="http://selectedmusic.net/Background_video.mp4" type="video/mp4"/>
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
<img src="http://selectedmusic.net/Background_video.mp4">
</video>

Any suggestions?

Website Url: http://selected.webflow.com

Kind Regards,

Dyllan


#2

http://www.w3schools.com/tags/att_video_muted.asp

<video controls muted>

#3

Do I just paste that into the Embed video code? Because I tried that in the web flow builder and nothing happened. Id preferably like to have a button in like the button right corner of maybe like a speaker of which you click on to turn on and off the volume..


#4

you change change your code this this to show the video controls:

    <video autoplay controls loop style="width:100%; height: auto; position:absolute; z-index: -1;"> 
<source src="http://selectedmusic.net/Background_video.mp4" type="video/mp4"/>
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type="application/ogg" />
<img src="http://selectedmusic.net/Background_video.mp4">
</video>

#5

But, its the same code? I dont get it. What did you change in the bottom code that would enable a Mute/Unmute button like the OP requested?


#6

I need to know how this constitutes as an answer to his question


#7

I added the "controls" attribute to the video tag :smiley:


#8

Touche. I am an oblivious man. Thank you so much!


#9

@PixelGeek

what am I missing here?
https://preview.webflow.com/preview/backgroundvideo-onoff?preview=f70dd38ea787182ced489a5f5098a723

I am trying to mute/unmute on click.

using this javascript example

http://jsbin.com/higor/1/edit?html,output


#10