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