I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based on tutorials. I just need it for one school assignment. Can someone please help me understand and fix the problem?
const btn = document.querySelector('.btn');
const videoContainer = document.querySelector('.video-containere');
const close = document.querySelector('.close');
btn.addEventListener('click', () => {
videoContainer.classList.add('show');
})
close.addEventListener('click', () => {
videoContainer.classList.remove('show');
})
const btn2 = document.querySelector('.btn2');
const videoContainer2 = document.querySelector('.video-container2');
const close2 = document.querySelector('.close'); //changed variable name to avoid conflict
btn2.addEventListener('click', () => {
videoContainer2.classList.add('show');
})
close2.addEventListener('click', () => {
videoContainer2.classList.remove('show');
}).btn {
text-decoration: none;
padding: 15px 40px;
background-color: #fff;
color: #000000;
border-radius: 40px;
font-family: 'Century Gothic';
font-weight: bolder;
}
.video-containere {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.video-containere .close {
position: absolute;
top: 10px;
right: 25px;
font-size: 20px;
cursor: pointer;
}
.video-containere video {
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s;
}
.video-containe...
<div class="content active">
<h1>Cristiano Ronaldo</h1>
<p>Cristiano Ronaldo ist ein portugiesischer Fußballspieler, der seit Ende August 2021 zum zweiten Mal in seiner Karriere bei Manchester United unter Vertrag steht. </p>
<a href="#" class="btn"> Mehr... </a>
</div>
<div class="content">
<h1>Muhammad Ali</h1>
<p>Muhammad Ali war ein US-amerikanischer Boxer und der einzige, der den Titel des unumstrittenen Weltmeisters dreimal in seiner Karriere gewinnen konnte. Bekannt wurde er zunächst unter seinem Namen Cassius Clay. Er gehörte zu den bedeutenden Schwergewichtsboxern
und herausragenden Sportathleten des 20. </p>
<a href="#" class="btn2"> Mehr... </a>
</div>
<div class="modal">
<div class="video-containere">
<span class="close"> ✖ </span>
<video src="CENSORED cause of private website" muted controls> </video>
</div>
</div>
<div class="modal">
<div class="video-container2">
<span class="close"> ✖ </span>
<video src="CENSORED cause of private website" muted controls> </video>
</div>
</div>