<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Benzeri Site</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #ff0000;
color: white;
padding: 15px;
text-align: center;
}
input {
width: 50%;
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
}
.video-list {
display: flex;
justify-content: center;
gap: 20px;
padding: 20px;
flex-wrap: wrap;
}
.video {
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
text-align: center;
}
.video img {
width: 100%;
border-radius: 10px;
}
.video h3 {
font-size: 16px;
color: #333;
}
#video-player {
display: none;
text-align: center;
padding: 20px;
}
.like-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
margin-top: 10px;
border-radius: 5px;
}
.comments {
margin-top: 20px;
text-align: left;
width: 80%;
margin: auto;
}
.comment-box {
width: 100%;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<h1>YouTube Clone</h1>
<input type="text" id="search" placeholder="Ara...">
</header>
<main>
<section class="video-list">
<div class="video">
<a href="#" onclick="playVideo('video1.mp4', 'Video Başlık 1')">
<img src="thumb1.jpg" alt="Video 1">
<h3>Video Başlık 1</h3>
</a>
</div>
<div class="video">
<a href="#" onclick="playVideo('video2.mp4', 'Video Başlık 2')">
<img src="thumb2.jpg" alt="Video 2">
<h3>Video Başlık 2</h3>
</a>
</div>
<div class="video">
<a href="#" onclick="playVideo('video3.mp4', 'Video Başlık 3')">
<img src="thumb3.jpg" alt="Video 3">
<h3>Video Başlık 3</h3>
</a>
</div>
<div class="video">
<a href="#" onclick="playVideo('video4.mp4', 'Video Başlık 4')">
<img src="thumb4.jpg" alt="Video 4">
<h3>Video Başlık 4</h3>
</a>
</div>
</section>
<section id="video-player">
<h2 id="video-title"></h2>
<video id="player" width="80%" controls></video>
<button class="like-btn" onclick="likeVideo()">Beğen 👍 (<span id="like-count">0</span>)</button>
<div class="comments">
<h3>Yorumlar</h3>
<textarea class="comment-box" id="comment-input" placeholder="Yorumunuzu yazın..."></textarea>
<button class="like-btn" onclick="addComment()">Yorumu Gönder</button>
<ul id="comment-list"></ul>
</div>
</section>
</main>
<script>
let likeCount = 0;
function playVideo(videoSrc, title) {
document.getElementById('video-player').style.display = 'block';
document.getElementById('player').src = videoSrc;
document.getElementById('video-title').innerText = title;
}
function likeVideo() {
likeCount++;
document.getElementById('like-count').innerText = likeCount;
}
function addComment() {
let commentInput = document.getElementById('comment-input');
let commentText = commentInput.value.trim();
if (commentText !== "") {
let commentList = document.getElementById('comment-list');
let newComment = document.createElement('li');
newComment.textContent = commentText;
commentList.appendChild(newComment);
commentInput.value = "";
}
}
</script>
</body>
</html>Görseller
Selamlar youtube clone basit bir prototip html örneğidir yakında daha gelişmiş hali gelebilir veya bunu sizlerde geliştirebilirsiniz iyi forumlar
