Stylization of video drivers

I want to stylize the drivers I created with HTML, CSS and JavaScript, but I'm not able to do one that would be mute. It works as follows: it will have the image of a musical note which means that the sound is inactive and when clicking on it will have to be with the same image, but with a risk that indicates that the sound is active. This is the code I used to do them:

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 be able to stylize 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 I have the JavaScript that the action to my buttons, but in one of them would be in the mute button to two images being set via JavaScript that would be that form that I explained at the beginning of the topic. But I do not know how to stylize that, much less set the folder hierarchy that is in my image. Here is the print of my structure where the images and the JavaScript code are:

Mytwoimagesareinsidethevideofolder:

TheJavaScriptcode:

functioninit(){//Masterfunction,encapsulatesallfunctionsvarvideo=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