Code HTML CSS JavaScript clone de YouTube

1,169 Theifdansoffical

Ouvrir dans l'éditeur Publiez votre code

Code HTML CSS JavaScript clone de YouTube

Recommandé

11 May 2026

Peurs des profondeurs

23 July 2025

Modèle HTML CSS de carte de profil Neumorphic

2 December 2025

Exemple de bouton HTML basique

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