Code HTML CSS JavaScript clone de YouTube

1,258 Theifdansoffical

Ouvrir dans l'éditeur Publiez votre code

Code HTML CSS JavaScript clone de YouTube

Recommandé

18 November 2024

Modèle de site Web de portefeuille moderne

20 December 2024

Un code par staticclass394

7 July 2025

Structure HTML de l'animation CSS Cube

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