Code HTML CSS JavaScript clone de YouTube

1,442 Theifdansoffical

Ouvrir dans l'éditeur Publiez votre code

Code HTML CSS JavaScript clone de YouTube

Recommandé

12 December 2025

Structure HTML du jeu Tic Tac Toe

28 November 2024

Arrière-plan animé de la matrice

3 July 2025

Un code de Mete

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Clone</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Roboto", Arial, sans-serif; }
        body { background-color: #0f0f0f; color: white; overflow-x: hidden; }

/* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 56px;
            background: #0f0f0f;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
        }
        .left-section { display: flex; align-items: center; }
        .menu-icon { font-size: 20px; margin-right: 15px; cursor: pointer; padding: 8px; border-radius: 50%; }
        .logo { display: flex; align-items: center; text-decoration: none; color: white; font-weight: bold; font-size: 20px; letter-spacing: -1px; }
        .logo i { color: #ff0000; font-size: 24px; margin-right: 4px; }

.mid-section { display: flex; flex: 0 1 720px; align-items: center; margin-left: 40px; }
        .search-box { display: flex; width: 100%; }
        .search-box input {
            width: 100%;
            background: #121212;
            border: 1px solid #303030;
            padding: 8px 16px;
            border-radius: 40px 0 0 40px;
            color: white;
            font-size: 16px;
            outline: none;
        }
        .search-btn {
            background: #222222;
            border: 1px solid #303030;
            border-left: none;
            padding: 0 20px;
            border-radius: 0 40px 40px 0;
            cursor: pointer;
            color: white;
        }
        .mic-btn { background: #181818; border: none; border-radius: 50%; width: 40px; height: 40px; margin-left: 10px; color: white; cursor: pointer; }

.right-section { display: flex; align-items: center; gap: 15px; }
        .right-section i { font-size: 20px; cursor: pointer; }
        .user-pic { width: 32px; height: 32px; background: #3ea6ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Sidebar */
        .sidebar {
            position: fixed;
            top: 56px;
            left: 0;
            width: 240px;
            height: calc(100vh - 56px);
            padding: 12px;
            overflow-y: auto;
        }
        .nav-link {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            text-decoration: none;
            color: white;
            border-radius: 10px;
            font-size: 14px;
        }
        .nav-link:hover, .active { background: #272727; }
        .nav-link i { margin-right: 20px; font-size: 18px; width: 24px; }
        hr { border: none; border-top: 1px solid #303030; margin: 12px 0; }

/* Main Content */
        .main-container { margin-left: 240px; padding: 20px; margin-top: 56px; }
        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 16px;
        }
        .video-card { cursor: pointer; }
        .thumbnail { position: relative; width: 100%; aspect-ratio: 16/9; background: #222; border-radius: 12px; overflow: hidden; }
        .thumbnail img { width: 100%; height: 100%; object-fit: cover; }
        .duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); padding: 2px 4px; border-radius: 4px; font-size: 12px; }
        
        .video-info { display: flex; margin-top: 12px; gap: 12px; }
        .channel-pic { width: 36px; height: 36px; border-radius: 50%; background: #444; flex-shrink: 0; }
        .details h3 { font-size: 16px; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .details p { font-size: 14px; color: #aaa; }

@media (max-width: 1200px) {
            .sidebar { width: 72px; }
            .sidebar span { display: none; }
            .main-container { margin-left: 72px; }
        }
    </style>
</head>
<body>

<header>
        <div class="left-section">
            <i class="fas fa-bars menu-icon"></i>
            <a href="#" class="logo">
                <i class="fab fa-youtube"></i> YouTube
            </a>
        </div>
        <div class="mid-section">
            <div class="search-box">
                <input type="text" placeholder="Search">
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div>
            <button class="mic-btn"><i class="fas fa-microphone"></i></button>
        </div>
        <div class="right-section">
            <i class="fas fa-video"></i>
            <i class="fas fa-bell"></i>
            <div class="user-pic">J</div>
        </div>
    </header>

<aside class="sidebar">
        <a href="#" class="nav-link active"><i class="fas fa-home"></i> <span>Home</span></a>
        <a href="#" class="nav-link"><i class="fab fa-playstation"></i> <span>Shorts</span></a>
        <a href="#" class="nav-link"><i class="fas fa-layer-group"></i> <span>Subscriptions</span></a>
        <hr>
        <a href="#" class="nav-link"><i class="fas fa-photo-video"></i> <span>Library</span></a>
        <a href="#" class="nav-link"><i class="fas fa-history"></i> <span>History</span></a>
        <a href="#" class="nav-link"><i class="fas fa-clock"></i> <span>Watch Later</span></a>
        <a href="#" class="nav-link"><i class="fas fa-thumbs-up"></i> <span>Liked Videos</span></a>
    </aside>

loadVideos();
        // Simple search interaction
        document.querySelector('.search-btn').addEventListener('click', () => {
            const query = document.querySelector('input').value;
            if(query) alert('Searching for: ' + query);
        });
    </script>
</body>
</html>

CSS