Code HTML CSS JavaScript clone de YouTube

891 Theifdansoffical

Ouvrir dans l'éditeur Publiez votre code

Code HTML CSS JavaScript clone de YouTube

Recommandé

21 November 2025

Formulaire de connexion néomorphique (code HTML et CSS)

25 November 2024

Site Web de données sur les étudiants réactif

8 March 2024

Menu HTML

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