Toggle HTML5 video mute with pure Javascript

Question

I'm trying to toggle mute/unmute on different videos with a custom button, without using jQuery. Here's my code:

const videoContainerCollection = document.getElementsByClassName('video-container'),
videoContainerArray = [...videoContainerCollection];
videoContainerArray.forEach(function(e) {
  const video = e.querySelector('video'),
  button = e.querySelector('button');
  video.muted = true;
  button.addEventListener('click', function() {
    button.classList.toggle('muted');
    if (video.muted = true) {
      video.muted = false;
    }
    else if (video.muted = false) {
      video.muted = true;
    }
  });
});

I am able to unmute each video, but I'm not able to mute it again. What am I doing wrong here?

Answer 1

const videoContainerCollection = document.getElementsByClassName('video-container'),
videoContainerArray = [...videoContainerCollection];
videoContainerArray.forEach(function(e) {
  const video = e.querySelector('video'),
  button = e.querySelector('button');
  video.muted = true;
  button.addEventListener('click', function() {
    button.classList.toggle('muted');
    if (video.muted === true) {
      video.muted = false;
    }
    else if (video.muted === false) {
      video.muted = true;
    }
  });
});