Stylization of video controllers

Question

I want to style the controllers I created with HTML, CSS and Javascript, but I’m not able to make one that would be to "mutate" (remove the sound). It works like this: it will have the image of a musical note that means that the sound is inactive and when you click on it you will have to keep the same image, but with a risk that indicates that the sound is active. That and the code I used to make them:

THE HTML:

<section id="header">
            <div class="inner">
                <div id="video">
                    <img src="images/bg-video.png" id="bg-video">
                    <!--                     poster="images/batimento.jpg"-->
                    <video id="Video1" width="100%" height="100%" autoplay loop>
                        <source src="video/animacao-lol.mp4" type="video/mp4" />
                    </video>
                </div>

                <h1 class="nomes">Lorem ipsum <strong class="slidText">Dolor</strong></h1>
                <p class="texto1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque. <br>Cras sit amet ligula 
                    ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>


                <div id="buttonbar" style="display: none;">

                    <button id="play" title="Play button"></button>
                    <button id="volDn"  title="Volume down button">-</button>
                    <button id="volUp"  title="Volume up button">+</button>
                    <button id="mute" title="Mute button" ><img src="images/video/demultado.png"/></button>        
                </div>   

                <center>
                    <ul class="actions">
                        <li><a href="#one" class="botao-circulo scrolly"><img src="images/seta-baixo.png"></a></li>
                    </ul>
                </center>
            </div>
        </section>

I created some divs in my structure to style the buttons with CSS:

#buttonbar #play{
    border-radius: 100%;
    border:2px solid #fff;
    cursor: pointer;
    background: transparent;
}
#buttonbar #volDn{
    border-radius: 100%;
    border:2px solid #fff;
    cursor: pointer;
    background: transparent;
    color: #fff;
}
#buttonbar #volUp{
    border-radius: 100%;
    border:2px solid #fff;
    cursor: pointer;
    background: transparent;
    color: #fff;
}

#buttonbar #mute{
    border-radius: 100%;
    border:6px solid #fff;
    cursor: pointer;
    transform: scale(0.3);
    background: transparent;
    color: #fff;
}
#buttonbar img{
  transform: scale(0.3);
}

And finally has Javascript that gives action to my buttons, put in one of them that would be on the button mute to two images being set via Javascript that would be the way I explained at the beginning of the topic. But I don’t know how to style that and much less set the hierarchy of folders that is my image. Follow the print of my structure where the images and the Javascript code are:

My two images are inside the video folder:

The Javascript code:

function init() {        // Master function, encapsulates all functions
    var video = document.getElementById("Video1");
    if (video.canPlayType) {   // tests that we have HTML5 video support
        // if successful, display buttons and set up events
        document.getElementById("buttonbar").style.display = "block";



        //  play video
        function vidplay(evt) {
            if (video.src == "") {  // inital source load
                getVideo();
            }
            button = evt.target; //  get the button id to swap the text based on the state                                    
            if (video.paused) {   // play the file, and display pause symbol
                video.play();
                button.textContent = "||";
            } else {              // pause the file, and display play symbol  
                video.pause();
                button.textContent = ">";
            }
        }



        // change volume based on incoming value 
        function setVol(value) {
            var vol = video.volume;
            vol += value;
            //  test for range 0 - 1 to avoid exceptions
            if (vol >= 0 && vol <= 1) {
                // if valid value, use it
                video.volume = vol;
            } else {
                // otherwise substitute a 0 or 1
                video.volume = (vol < 0) ? 0 : 1;
            }
        }


        //  button events               
        //  Play


        document.getElementById("play").addEventListener("click", vidplay, false);

        // volume buttons
        document.getElementById("volDn").addEventListener("click", function () {
            setVol(-.1); // down by 10%
        }, false);
        document.getElementById("volUp").addEventListener("click", function () {
            setVol(.1);  // up by 10%
        }, false);


        document.getElementById("mute").addEventListener("click", function (evt) {
            if (video.muted) {
                video.muted = false;
                evt.target.innerHTML = "<img alt='volume on button' src='../images/video/mutado.png' id='js-imagem' />"
            } else {
                video.muted = true;
                evt.target.innerHTML = "<img alt='volume off button' src='../images/video/desmutado.png' />"
            }
        }, false);
    } // end of runtime
}// end of master