Video play when div has class active and pause when has class next

Div’s with video has 3 other classes – active, prev and next. I want to play video when the div has class “active”. For div’s ‘.item’ querySelectorAll don’t work and querySelector work only on first div ( play movie but don’t pause when the div class change from active to prev or next).

<div class="items">
    <div class="item active">
        <video class="vd" src="https://www.oleofarm24.pl/data/include/cms/0cms-podstrony-l/2_film_FORTE_mobilka.mp4?v=1720421734786"
        type="video/mp4" muted loop>
        </video>
    </div>
    <div class=" item next">
        <video class="vd" src="https://www.oleofarm24.pl/data/include/cms/0cms-podstrony-l/1_film_KIDS_mobilka.mp4?v=1720421734787"
        type="video/mp4" muted loop>
           </video>
    </div>
    <div class="item prev">
        <video class="vd" src="https://www.oleofarm24.pl/data/include/cms/0cms-podstrony-l/3_film_K2_mobilka.mp4?v=1720421734786"
       type="video/mp4" muted loop>
          </video>
    </div>
    <div class="button-container">
        <div class="button"><i class="fas fa-angle-left"></i></div>
        <div class="button"><i class="fas fa-angle-right"></i></div>
    </div>
</div>

<script>
const slider = document.querySelector(".items");
        const slides = document.querySelectorAll(".item");
        const button = document.querySelectorAll(".button");
    const clp = document.querySelector(".vd")

        let current = 0;
        let prev = 2;
        let next = 1;

        for (let i = 0; i < button.length; i++) {
            button[i].addEventListener("click", () => i == 0 ? gotoPrev() : gotoNext());
        }

        const gotoPrev = () => current > 0 ? gotoNum(current - 1) : gotoNum(slides.length - 1);

        const gotoNext = () => current < 2 ? gotoNum(current + 1) : gotoNum(0);

        const gotoNum = number => {
            current = number;
            prev = current - 1;
            next = current + 1;

            for (let i = 0; i < slides.length; i++) {
                slides[i].classList.remove("active");
                slides[i].classList.remove("prev");
                slides[i].classList.remove("next");
            }

            if (next == 3) {
                next = 0;
            }

            if (prev == -1) {
                prev = 2;
            }

            slides[current].classList.add("active");
            slides[prev].classList.add("prev");
            slides[next].classList.add("next");
        }

  function crnt(){
  if(slider.classList.contains('active')){
  clp.play();
}
  if(slider.classList.contains('prev') && slider.classList.contains('next')){
  clp.pause();
  }
}
  crnt()
</script>

<style>
@import url("https://use.typekit.net/ewm4fzc.css");
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

 .items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

.items .item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 750px;
  overflow: hidden;
  transition: all 300ms ease-in-out;
  z-index: -1;
  opacity: 0;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item.active {
  opacity: 1;
  z-index: 99;
  box-shadow: 0px 0px 105px -35px rgba(0, 0, 0, 0.75);
}

.item.prev {
  z-index: 2;
  opacity: 0.25;
  transform: translate(-125%, -50%);
}

.item.next {
  z-index: 2;
  opacity: 0.25;
  transform: translate(25%, -50%);
}

.items .button-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 275px;
  z-index: 100;
}

.button-container .button {
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  position: relative;
  opacity: 0.75;
  transition: all 300ms ease-in-out;
}

.button-container .button:hover {
  opacity: 1;
}

.button-container .button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 1);
  border-radius: 50%;
  z-index: -99;
}

.button-container .button:nth-child(1) {
  float: left;
}

.button-container .button:nth-child(2) {
  float: right;
}
div > h2{
   position: absolute;
   color: #f99f00;
   font-size: 8em;
   font-weight: bold;
   rotate: 270deg;
   font-family: 'eurostile',Arial,sans-serif;
   top: 25%;
   left: 60%;
   transform: translate(-50%, -50%);
}
.active1{
width:250px;
height:750px;
}
</style>

Div’s with video has 3 other classes – active, prev and next. I want to play video when the div has class “active”.