Şöyle bir kod yazdım ancak video 1 tıkladıgımda video 1 acılıyor, video 2ye tıkladıgımda video 2 acılmıyor bunu nasıl çözerim?

buraya yazamıyorum kod yanıt olarak verildi, yardımcı olursanız cok sevinirim

<!DOCTYPE html>
<html>
<head>
<style>
body{
    margin: 0;
	background: #212129;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

buton {
	margin: 10px 0;
	width: 100%;
	padding: 10px;
	border: 1px solid #00ffff;
	background: #000;
	color: #00ffff;
	font-size: 1em;
	border-radius: 5px;
	cursor: pointer;
}
buton:hover{
	color: #000;
	background: #00ffff;
}
.film {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.9);
	z-index: 10;
	visibility: hidden;
	opacity: 0;
}
.film video{
	max-width: 500px;
	outline: none;
	position: relative;
}
.kapat {
	position: absolute;
	top: 30px;
	right: 30px;
	color: #fff;
	font-size: 42px;
	cursor: pointer;
}

</style>
</head>
<body>

<buton>Video 1</buton>
<div class="film">
<video src="https://d198.d2mefast.net/tb/e/f6/ozgur_can_coban_baga_gel_bostana_gel_gel_yanima_h264_73944.mp4" controls="true" type="application/x-mpegURL"></video>
<span class="kapat">×</span></div>
    
<buton>Video 2</buton>
<div class="film">
<video src="https://d198.d2mefast.net/tb/e/f6/ozgur_can_coban_baga_gel_bostana_gel_gel_yanima_h264_73944.mp4" controls="true" type="application/x-mpegURL"></video>
<span class="kapat">×</span></div>

<script>
const button = document.querySelector("buton");
const close = document.querySelector(".kapat");
const trailer = document.querySelector(".film");
const video = document.querySelector("video");

button.addEventListener('click', ()=>{
trailer.style.visibility = "visible";
trailer.style.opacity = 1;
});

close.addEventListener('click', ()=>{
trailer.style.visibility = "hidden";
trailer.style.opacity = 0;
           
video.pause();
video.currentTime = 0;
});
</script>
</body>
</html>

Html bilgim pek fazla yok ama sanırım

const button = document.querySelector("buton");
const video = document.querySelector("video");

bunları direk böyle çektiğin için butonlara videolara id falan ver öyle çek böyle çekersen sanırım ilk butona buton diyor.

Burada ilk buton elementi secilmis. Birden fazla element icin querySelectorAll kullanmak lazim.

Veya bu kodu iki kere, farkli isimli elementler kullanarak yazabilirsiniz.

Benimde yazdığım kod şuan böyle değil mi?

Rica etsem bu dediğiniz yöntemi benim yazdığım koda yazarak bana verebilir misiniz? Javascript yeni öğreniyorum daha görmeden zor anlıyorum

<!DOCTYPE html>
<html>
<head>
<style>
body{
    margin: 0;
	background: #212129;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

buton {
	margin: 10px 0;
	width: 100%;
	padding: 10px;
	border: 1px solid #00ffff;
	background: #000;
	color: #00ffff;
	font-size: 1em;
	border-radius: 5px;
	cursor: pointer;
}
buton:hover{
	color: #000;
	background: #00ffff;
}
.film {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.9);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
}
.film video{
	max-width: 500px;
	outline: none;
	position: relative;
}
.kapat {
	position: absolute;
	top: 30px;
	right: 30px;
	color: #fff;
	font-size: 42px;
	cursor: pointer;
}

</style>
</head>
<body>
<buton id="b1">Video 1</buton>
<div id="v1" class="film">
<video src="https://d198.d2mefast.net/tb/e/f6/ozgur_can_coban_baga_gel_bostana_gel_gel_yanima_h264_73944.mp4" controls="true" type="application/x-mpegURL"></video>
<span id="k1" class="kapat">x</span>
</div>
    
<buton id="b2">Video 2</buton>
<div id="v2" class="film">
<video src="https://d198.d2mefast.net/tb/e/f6/ozgur_can_coban_baga_gel_bostana_gel_gel_yanima_h264_73944.mp4" controls="true" type="application/x-mpegURL"></video>
<span id="k2" class="kapat">x</span>
</div>

<script>
const button = document.getElementById("b1");
const button2 = document.getElementById("b2");
const kapat = document.getElementById("k1");
const kapat2 = document.getElementById("k2");
const trailer = document.getElementById("v1");
const trailer2 = document.getElementById("v2");

const video = document.querySelectorAll("video");

button.addEventListener('click', ()=>{
trailer.style.visibility="visible"
trailer.style.opacity = 1;
});
button2.addEventListener('click', ()=>{
trailer2.style.visibility="visible"
trailer2.style.opacity = 1;
});
kapat.addEventListener('click', ()=>{
	trailer.style.visibility="hidden"
	trailer.style.opacity = 0;      
video.pause();
video.currentTime = 0;
});
kapat2.addEventListener('click', ()=>{
	trailer2.style.visibility="hidden"
	trailer2.style.opacity = 0;  
video.pause();
video.currentTime = 0;
});

</script>
</body>
</html>

Şöyle bir şey yaptım ama belki yanlış yolla yapmışımdır dediğim gibi html çok bilmiyorum

1 Beğeni

Çok teşekkür ederim kod istediğim gibi çalıştı