<!DOCTYPE html>
<html>
<head>
<title>Tanıtım Videosu</title>
<style>
.video-popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 400px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.lang-selection {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f0f0f0;
}
.lang-button {
cursor: pointer;
}
.video-content {
display: flex;
justify-content: space-between;
padding: 20px;
}
.video {
width: 45%;
height: 100%;
}
</style>
</head>
<body>
<div class="video-popup">
<div class="lang-selection">
<div class="lang-button">
<img src="turkish-flag.png" alt="Turkish Flag" width="24" height="24">
Türkçe
</div>
<div class="lang-button">
<img src="english-flag.png" alt="English Flag" width="24" height="24">
English
</div>
</div>
<div class="video-content" id="turkish-video" style="display: none;">
<video class="video" controls>
<source src="turkish-video.mp4" type="video/mp4">
</video>
</div>
<div class="video-content" id="english-video" style="display: none;">
<video class="video" controls>
<source src="english-video.mp4" type="video/mp4">
</video>
</div>
</div>
<script>
var turkishButton = document.querySelector("#turkish-video");
var englishButton = document.querySelector("#english-video");
turkishButton.addEventListener("click", function() {
document.querySelector("#turkish-video").style.display = "block";
document.querySelector("#english-video").style.display = "none";
});
englishButton.addEventListener("click", function() {
document.querySelector("#turkish-video").style.display = "none";
document.querySelector("#english-video").style.display = "block";
});
</script>
</body>
</html>
Yukarıdaki kod, Türkçe ve İngilizce tanıtım videolarını seçmek için bir popup penceresi oluşturuyor. Her dil için ayrı bir video içeriyor. Türkçe veya İngilizce seçeneklere tıklandığında, ilgili video görüntüleniyor.
Bu kodda, <video> etiketleri içindeki src özelliği videoların dosya yolunu belirtir. Türkçe ve İngilizce bayrak resimlerini ve videolarını doğru şekilde yerleştirdiğinizden emin olun. Ayrıca, pop-up penceresinin boyutunu ve stillerini ihtiyaca göre düzenleyebilirsiniz.
Mobil cihazlarda da uyumlu çalışması için, responsive tasarım özelliklerini eklemeyi düşünebilirsiniz.