Mute the video on clicking the swiper next or swiper prev button in brightcove player

Question

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <video-js
        id="overlayVideo"
        class="overlayVideo"
        data-account="6269594386001"
        data-player="oHG2GzKTGk"
        data-embed="default"
        controls=""
        data-video-id="6304418462001"
        data-playlist-id=""
        data-application-id=""
        data-object-fit="cover"
        autoplay
        muted loop
        playsinline
      >
      </video-js>
      <script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
    </div>
    <div class="swiper-slide">
      <video-js
        id="overlayVideo"
        class="overlayVideo"
        data-account="6269594386001"
        data-player="oHG2GzKTGk"
        data-embed="default"
        controls=""
        data-video-id="6304418462001"
        data-playlist-id=""
        data-application-id=""
        data-object-fit="cover"
        autoplay
        muted loop
        playsinline
      >
      </video-js>
      <script src="https://players.brightcove.net/6269594386001/oHG2GzKTGk_default/index.min.js"></script>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>


$(document).ready(function () {
  var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  $(".swiper-button-prev, .swiper-button-next").click(function () {
    videojs.getPlayer("overlayVideo").ready(function () {
      var myPlayers = this;
      myPlayers.muted(true);
    });
  });
});

By default I am playing the video as muted and when I unmute the video manually and click on swiper next or prev button, the video should go on mute, but currently it is happening only on clicking previous button but not muting on clicking next button. Can someone help me in achieving this. Thanks in advance

Answer 1

<video-js
  id="overlayVideo"

You can't have two HTML5 elements or two players with the same id. You need to give them unique ids, and mute (or probably better, pause) only the specific player.