title: Javascript mute/unmute video using image
body: <p>For some reason, it's just not working.. What am I doing wrong?
  I want to be able to mute and unmute the video using an image, which is changing whether the video is muted or not.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function mute() {
              var video = document.getElementById("bgvid");
           if (!video.muted) {
               document.getElementById('muteicon').src = "Images/muteicon.png";
              video.muted;
           }     else {
               document.getElementById('muteicon').src = "Images/soundicon.png";
               video.muted == false;
               }
  
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video#bgvid {
              margin-top: 30px;
              margin-bottom: 60px;
  
              width: 1280px; height: 720px;
  
  
              background-size: cover;
  
          }
          video { display: block; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video autoplay loop id="bgvid"&gt;
          &lt;source src="newyork.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;img alt="mute icon" src="Images/soundicon.png" id="muteicon" onclick="mute()"&gt;
      &lt;script&gt;
        &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>