Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!
HTML, CSS ve JavaScript kullanarak, sağ tarafta sıralı bir şekilde YouTube videolarının gösterileceği bir panel oluşturabilirsiniz. Bu panel, kullanıcıya bir liste halinde videoları gösterecek ve her bir video, panelde sıralanmış şekilde yer alacak. Panelin konumu sağda olacak ve sabit kalacak şekilde tasarlanabilir.
Aşağıda, sağ tarafta sıralı YouTube video paneli oluşturmak için gerekli olan HTML, CSS ve JavaScript kodlarını bulabilirsiniz.
Aşağıda, sağ tarafta sıralı YouTube video paneli oluşturmak için gerekli olan HTML, CSS ve JavaScript kodlarını bulabilirsiniz.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sağ Tarafta Sıralı YouTube Video Paneli</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Sayfa içeriği -->
<h1>Hoşgeldiniz!</h1>
<p>Sayfanın sağ tarafında sıralı YouTube videoları paneli olacak.</p>
<!-- YouTube Video Paneli -->
<div id="videoPanel" class="video-panel">
<h3>Video Listesi</h3>
<ul>
<li>
<iframe width="250" height="150" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Video 1: Rickroll</p>
</li>
<li>
<iframe width="250" height="150" src="https://www.youtube.com/embed/2Vv-BfVoq4g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Video 2: Perfect</p>
</li>
<li>
<iframe width="250" height="150" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Video 3: Best Song Ever</p>
</li>
</ul>
</div>
</body>
</html>
CSS:
/* Sayfa Genel Stil */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* YouTube Video Paneli Stil */
.video-panel {
position: fixed;
right: 0;
top: 20px; /* Üstten 20px boşluk bırak */
width: 270px;
height: auto;
background-color: #fff;
border-left: 2px solid #ccc;
box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.1);
padding: 10px;
z-index: 1000;
}
.video-panel h3 {
text-align: center;
margin-top: 0;
}
.video-panel ul {
list-style: none;
padding: 0;
}
.video-panel li {
margin-bottom: 20px;
}
.video-panel iframe {
width: 100%;
border-radius: 8px;
}
.video-panel p {
text-align: center;
margin-top: 5px;
font-size: 14px;
color: #333;
}Çalışma Prensibi:
- Panel sayfa yüklendiğinde sağ tarafta sabit kalır.
- YouTube videoları panelin içine sıralanmış şekilde gelir ve her video altında başlık bulunmaktadır.
- Videoların boyutları 250x150 olarak belirlenmiştir, ancak ihtiyacınıza göre değiştirilebilir.
Özelleştirme:
- Video URL'lerini değiştirin: Her bir iframe öğesindeki src URL'sini, istediğiniz YouTube videosunun embed linkiyle değiştirebilirsiniz.
- Örneğin:
- Panelin genişliği ve boyutlarını değiştirin: Eğer paneli daha geniş yapmak isterseniz, .video-panel sınıfındaki width değerini arttırabilirsiniz.
- Daha fazla video ekleyin: Videoları eklemek için daha fazla <li> öğesi ekleyebilirsiniz. Her <li> içinde yeni bir iframe ekleyin.
