â–Ľ
Streaming live at 10am (PST)

HOW TO(?): Add Mute / Unmute button to a Webflow Video Background


#1

October 9, 2018 2:25 PM (Europe: Paris), October 9, 2018 5:25 AM (America: Los Angeles)

I have a page built with webflow, it has a webflow video background put in it. It seems to come muted by default which is fine.

I would just like to include a small button in the corner so the user is able to unmute and mute the audio at the very least. If we can add volume that is even better.

Here is the SHARE LINK

CURRENT PAGE PARKED ON WEBFLOW DOMAIN

ALSO SEE SOF>COM

I have tried a few other code examples on here with no success, for example this (

HERE 01

HERE 02

)

( [ WANTING TO CREATE CUSTOM MUTE… ])

<!-- MUTEBUTTON \/ MUTEBUTTON -->

<script>  
 
var themutebtn;
intitializePlayer()  // **don't forget to call the initialize**

function intitializePlayer(){
    //set object references
    vid = document.getElementById("intro_video");
    themutebtn = document.getElementById("audioswitch1");
    //add event listener
    themutebtn.addEventListener("click",vidmute,false);   // **quotes only around the event** 
}

function mute_switch(){   // **there was an extra '.' between function and vidmute**
    if(vid.muted){
        vid.muted = false;
        themutebtn.innerHTML = "mute";
    } else {
        vid.muted = true;
        themutebtn.innerHTML = "Unmute";
    }
}

  
</script>

<!-- MUTEBUTTON /\ MUTEBUTTON -->

#2

This is NOT possible. Background Videos do NOT have audio, so even if you unmute it there will be NO SOUND.

See these two posts I made for more info:

Mute un mute button for background video?

Mute un mute button for background video?


#3

Okay, so now that you have informed me I have sought out a method to build a custom video background and a mute and unmute button to go with it.

I have found a post that seemed to provide a straightforward approach that I am now navigating my way through, I took the HTML code and put it into a custom embed, added the javascript, and gave the mute id to my previously built button. Then I matched the CSS settings best I could through webflow to the associated classes.

There are a few things, I can not get the test video to go full screen (btw I am seeking out a free trial for hosting the video or something inexpensive, until I can figure out how to deal with Amazon). The other thing is that I can not get the mute button to work although the sound is playing.

So that’s two out of three that needs too be fixed but a little bit of something is better than a little bit of nothing.

I am currently seeking advise, help, and possibly hired assistance through meet ups and previous mentors, along with the online forums of coarse.

Whatever I end up comming up with I will be sure to post.
( I have to get this done tonight or tomorrow night the album is due to launch thursday.)

Thanks errbody!

Mike

HERE IS THE POST I FOLLOWED: https://codepen.io/leon9208/pen/JbmJGE

SHARE: https://preview.webflow.com/preview/sf-com?utm_source=sf-com&preview=6fd15599e11ee97ef291c8dd0de0addb

WEBFLOW DOMAIN: [http://sf-com.webflow.io/](http://webflow domain)


#4

Okay so I still haven’t slept yet, I have Japanese class in like 4 hours. yon. I have managed to upload the video to an amazon bucket i made the other night. It gives me a link, i put it in the code I have…

IT WORKS, with the audio, … but only in the designer… on preview while i am working on it. This makes me feel a little better because something is working.

however I am completely stumped at this time. I don’t know why it is not working in the browser after publish… I would like this to be one of those things I wake up the next day and for some reason can fix in five minutes, but I don’t think that is the case.

I may want to start from scratch… I don’t know…

WHOS WITH ME!!!

… me.

https://preview.webflow.com/preview/sf-com?utm_source=sf-com&preview=6fd15599e11ee97ef291c8dd0de0addb

http://sf-com.webflow.io/

I still have the mute button to get working next. But having something to look at that loads, and you can mute of coarse is a good place to start.


#5

If that helps it does work for me :slight_smile: Opening your site shows a video that has audio on. Pressing mute button in top-left mutes the audio.


#6

THANK YOU SO MUCH BART!! Hrm I wander why it’s not working on mine… the only thing I can think of is that maybe the file is big and is taking my internet a long time to load. I guess at some point adding a loading animation would be nice. Maybe try to get the file size down a bit, which should probably be optimized anyways.

I am wandering what is a good number of mega-bites maybe 90 max? I guess all I can do right now is test with a smaller video. Becoming more knowledgeable on the list of things to do as well.


#7

90?? I was thinking 5-10MB


#8

Thank You! That makes sense…

I got it down to 5mb still having issues. I am a bit stumped because it was working momentarily with larger version but then it stopped after a refresh (im pretty sure) and no changes… no errors in the console.

scratchesHead