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”.