Şö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?

, ,
1

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

2 
<!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>
3

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.

4

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

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

5

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

6

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

7 
<!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
8

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