Wanting To Create A Custom Mute/unmute Button For The Audio On A Full Screen Video Background

I currently have a full screen background video which I have looping with audio, I want to make a custom button so when visitors visit the site can mute/unmute the audio. I have tr

Solution 1:

looks like three small changes where needed 1/ quotes only around the click not the whole of the addEventListener parameters 2/ call the initialize 3/ remove extra period from function.vidmute

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

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

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