Dans ce tutoriel, tu vas créer une interface YouTube en HTML et CSS : un header fixe avec recherche, une barre latérale de navigation, une grille de vidéos responsive et une page « Historique ». Un projet complet pour maîtriser Flexbox, CSS Grid et la mise en page d’une vraie application web.

Niveau : intermédiaireDurée : ~1 h 30HTML · CSS (Flexbox, Grid)Code source gratuit
Interface YouTube en HTML et CSS avec header, barre latérale et grille de vidéos
Le résultat final : la page d’accueil de l’interface YouTube
Logo GitHubTélécharger le code source du projet sur GitHub
⚠️
Projet à but pédagogique

Ce clone statique sert uniquement à apprendre l’intégration web. Il n’a aucun back-end et ne doit pas être mis en ligne pour imiter YouTube.

Ce que tu vas construire : une interface YouTube complète

L’objectif est de créer une interface YouTube en HTML et CSS statique, mais avec une structure réaliste et propre, comme sur un vrai projet professionnel :

🧭 Header fixeBouton menu, logo, barre de recherche et bouton « Se connecter ».
📚 Barre latéraleLiens de navigation, séparateurs et bloc « Connectez-vous ».
🎬 Grille de vidéosCartes avec miniature 16:9, durée, avatar, titre et infos.
🕘 Page HistoriqueUne seconde page avec état vide et retour à l’accueil.

Prérequis

  • Les bases de HTML et de CSS, en particulier Flexbox et CSS Grid
  • Quelques notions d’interface : espacements, alignements, effets de survol
  • Un éditeur de code comme Visual Studio Code et un navigateur récent
💡
Pour t’échauffer

Tu préfères commencer plus simple ? Relève d’abord le défi recréer la page d’accueil de Google en HTML et CSS.

Arborescence du projet

youtube/ ├── index.html # accueil : header + barre latérale + grille ├── style.css # style global partagé par toutes les pages ├── assets/ # miniatures, avatars, icônes └── pages/ └── history.html # page « Historique »

Étape 1 : construire la page d’accueil (index.html)

La page d’accueil se divise en trois zones : le header fixe en haut, la barre latérale à gauche et la grille de vidéos au centre. Voici la structure recommandée :

  • <header class="header"> divisé en .header-left (menu + logo), .header-center (recherche) et .header-right (icônes + connexion)
  • <div class="main-container"> qui contient la barre latérale <aside class="sidebar"> et le contenu <main class="main-content">
  • Dans le contenu, une grille .videos-grid remplie de cartes .video-card

Crée le fichier index.html avec ce code :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube</title>
    <link rel="stylesheet" href="style.css">
    <!-- Favicon YouTube -->
    <link rel="icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon_32x32.png">
</head>
<body>
    <!-- En-tête fixe avec le logo, la recherche et les boutons -->
    <header class="header">
        <div class="header-left">
            <!-- Bouton menu hamburger -->
            <button class="icon-btn menu-btn">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
                </svg>
            </button>
            <!-- Logo YouTube -->
            <a href="index.html" class="logo">
                <svg viewBox="0 0 90 20" width="90" height="20">
                    <g>
                        <path fill="#FF0000" d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/>
                        <path fill="#FFFFFF" d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"/>
                    </g>
                    <text x="34" y="16" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000">YouTube</text>
                </svg>
            </a>
        </div>

        <!-- Barre de recherche au centre -->
        <div class="header-center">
            <div class="search-box">
                <input type="text" placeholder="Rechercher" class="search-input">
                <button class="search-btn">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                </button>
            </div>
            <button class="icon-btn voice-btn">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 15c1.66 0 2.99-1.34 2.99-3L15 6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 15 6.7 12H5c0 3.42 2.72 6.23 6 6.72V22h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/>
                </svg>
            </button>
        </div>

        <!-- Boutons à droite -->
        <div class="header-right">
            <button class="icon-btn">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
                </svg>
            </button>
            <button class="icon-btn">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                </svg>
            </button>
            <button class="btn-signin">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
                Se connecter
            </button>
        </div>
    </header>

    <!-- Conteneur principal avec sidebar et contenu -->
    <div class="main-container">
        <!-- Barre latérale de navigation -->
        <aside class="sidebar">
            <nav class="nav-section">
                <a href="#" class="nav-item active">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                    <span>Accueil</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"/></svg>
                    <span>Shorts</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>
                    <span>Abonnements</span>
                </a>
            </nav>

            <div class="nav-divider"></div>

            <nav class="nav-section">
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    <span>Vous</span>
                </a>
                <a href="pages/history.html" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
                    <span>Historique</span>
                </a>
            </nav>

            <div class="nav-divider"></div>

            <div class="signin-prompt">
                <p>Connectez-vous pour aimer des vidéos, commenter et vous abonner.</p>
                <button class="btn-signin-sidebar">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                        <path d="M12 6v6l4 2"/>
                    </svg>
                    Se connecter
                </button>
            </div>

            <div class="nav-divider"></div>

            <nav class="nav-section">
                <h3 class="nav-title">Explorer</h3>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
                    <span>Tendances</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                    <span>Musique</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>
                    <span>Jeux vidéo</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="24" height="24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
                    <span>Sport</span>
                </a>
            </nav>
        </aside>

        <!-- Contenu principal : grille de vidéos -->
        <main class="main-content">
            <div class="videos-grid">
                <!-- Vidéo 1 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/youtube-desktop.jpg');">
                        <span class="thumbnail-icon">🐧</span>
                        <span class="video-duration">12:34</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">L</div>
                        <div class="video-details">
                            <h3 class="video-title">Introduction à Linux pour débutants</h3>
                            <p class="video-meta">TechLinux • 1,2 M de vues • il y a 2 jours</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 2 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/youtube-laptop.jpg');">
                        <span class="thumbnail-icon">🎨</span>
                        <span class="video-duration">8:15</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">D</div>
                        <div class="video-details">
                            <h3 class="video-title">Design moderne avec CSS Grid</h3>
                            <p class="video-meta">DesignPro • 856 K de vues • il y a 1 semaine</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 3 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/apps-grid.jpg');">
                        <span class="thumbnail-icon">⚛️</span>
                        <span class="video-duration">15:42</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">R</div>
                        <div class="video-details">
                            <h3 class="video-title">React JS - Les hooks expliqués simplement</h3>
                            <p class="video-meta">CodeAcademy • 2,4 M de vues • il y a 3 jours</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 4 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/streaming-tv-remote.jpg');">
                        <span class="thumbnail-icon">🎮</span>
                        <span class="video-duration">22:11</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">G</div>
                        <div class="video-details">
                            <h3 class="video-title">Les meilleurs jeux de 2025 à ne pas manquer</h3>
                            <p class="video-meta">GamerZone • 3,1 M de vues • il y a 5 jours</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 5 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/cameras.jpg');">
                        <span class="thumbnail-icon">🍳</span>
                        <span class="video-duration">10:28</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">C</div>
                        <div class="video-details">
                            <h3 class="video-title">Recette rapide : Pâtes carbonara authentiques</h3>
                            <p class="video-meta">Chef en Herbe • 678 K de vues • il y a 1 jour</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 6 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/laptop-coffee.jpg');">
                        <span class="thumbnail-icon">🚀</span>
                        <span class="video-duration">18:55</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">S</div>
                        <div class="video-details">
                            <h3 class="video-title">SpaceX : Le prochain lancement vers Mars</h3>
                            <p class="video-meta">ScienceActu • 1,9 M de vues • il y a 4 jours</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 7 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/subscribe-phone.jpg');">
                        <span class="thumbnail-icon">🏋️</span>
                        <span class="video-duration">14:20</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">F</div>
                        <div class="video-details">
                            <h3 class="video-title">Programme fitness 30 jours pour débutants</h3>
                            <p class="video-meta">FitLife • 945 K de vues • il y a 6 jours</p>
                        </div>
                    </div>
                </div>

                <!-- Vidéo 8 -->
                <div class="video-card">
                    <div class="thumbnail photo" style="background-image: url('assets/images/architecture-roof.jpg');">
                        <span class="thumbnail-icon">📱</span>
                        <span class="video-duration">9:33</span>
                    </div>
                    <div class="video-info">
                        <div class="channel-avatar" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">T</div>
                        <div class="video-details">
                            <h3 class="video-title">iPhone 16 vs Samsung S25 - Comparaison complète</h3>
                            <p class="video-meta">TechReview • 2,7 M de vues • il y a 2 jours</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
index.html

Sans CSS, la page affiche déjà tout le contenu, mais sans aucune mise en page :

Interface YouTube en HTML sans CSS : contenu brut avant la mise en forme
La page d’accueil avant l’ajout du CSS

Étape 2 : concevoir des cartes vidéo réalistes

Chaque carte reprend le modèle de YouTube : une miniature avec la durée en surimpression, puis en dessous l’avatar de la chaîne et un bloc de texte (titre, nom de la chaîne, vues et date). Pour un rendu professionnel :

  • Toutes les miniatures gardent le même ratio grâce à aspect-ratio: 16 / 9
  • Les infos secondaires (vues, date) sont plus discrètes, en gris
  • Les titres sont limités visuellement à deux lignes
  • L’effet de survol reste subtil

Étape 3 : le style global (style.css)

Le fichier style.css est le fichier maître de ton interface YouTube : toutes les pages l’importent. Organise-le en sections : base, header, barre latérale, grille, cartes et responsive.

/* ==============================================
   RESET ET BASE
   YouTube a un design épuré et moderne
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Roboto", "Arial", sans-serif;
    background-color: #f9f9f9;
    color: #030303;
}

/* ==============================================
   HEADER (Navigation en haut - toujours visible)
   ============================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 2000;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Section gauche avec menu et logo */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Boutons icônes du header */
.icon-btn {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.icon-btn svg {
    fill: #030303;
}

/* Le logo YouTube */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Section centrale avec la recherche */
.header-center {
    flex: 0 1 728px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Barre de recherche */
.search-box {
    flex: 1;
    display: flex;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 40px;
    overflow: hidden;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 16px;
}

.search-input::placeholder {
    color: #888;
}

/* Bouton de recherche */
.search-btn {
    width: 64px;
    border: none;
    background-color: #f8f8f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #d3d3d3;
    transition: background-color 0.2s;
}

.search-btn:hover {
    background-color: #f0f0f0;
}

.search-btn svg {
    fill: #030303;
}

/* Bouton micro pour recherche vocale */
.voice-btn {
    flex-shrink: 0;
}

/* Section droite avec les actions utilisateur */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bouton "Se connecter" */
.btn-signin {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #065fd4;
    background: transparent;
    color: #065fd4;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-signin:hover {
    background-color: #def1ff;
}

.btn-signin svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* ==============================================
   LAYOUT PRINCIPAL
   Sidebar fixe à gauche + contenu scrollable
   ============================================== */
.main-container {
    display: flex;
    padding-top: 56px; /* Espace pour le header fixe */
}

/* ==============================================
   SIDEBAR (Navigation latérale)
   ============================================== */
.sidebar {
    position: fixed;
    left: 0;
    top: 56px;
    width: 240px;
    height: calc(100vh - 56px);
    background-color: #ffffff;
    overflow-y: auto;
    padding: 12px 0;
    z-index: 1000;
}

/* Sections de navigation dans la sidebar */
.nav-section {
    padding: 8px 0;
}

/* Titre de section dans la sidebar */
.nav-title {
    font-size: 14px;
    font-weight: 500;
    color: #0f0f0f;
    padding: 8px 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Items de navigation */
.nav-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 10px 24px;
    color: #0f0f0f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.2s;
    cursor: pointer;
}

.nav-item:hover {
    background-color: #f2f2f2;
}

.nav-item.active {
    background-color: #f2f2f2;
    font-weight: 500;
}

.nav-item svg {
    width: 24px;
    height: 24px;
    fill: #0f0f0f;
}

/* Ligne de séparation dans la sidebar */
.nav-divider {
    height: 1px;
    background-color: #e5e5e5;
    margin: 12px 0;
}

/* Prompt de connexion dans la sidebar */
.signin-prompt {
    padding: 16px 24px;
}

.signin-prompt p {
    font-size: 14px;
    line-height: 1.4;
    color: #0f0f0f;
    margin-bottom: 16px;
}

.btn-signin-sidebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #065fd4;
    background: transparent;
    color: #065fd4;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-signin-sidebar:hover {
    background-color: #def1ff;
}

.btn-signin-sidebar svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

/* ==============================================
   CONTENU PRINCIPAL (Grille de vidéos)
   ============================================== */
.main-content {
    margin-left: 240px; /* Espace pour la sidebar */
    flex: 1;
    padding: 24px;
}

/* Grille de vidéos - responsive avec CSS Grid */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* ==============================================
   CARTE VIDÉO
   Chaque vidéo est dans une carte
   ============================================== */
.video-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.video-card:hover {
    transform: scale(1.02);
}

/* Thumbnail de la vidéo (image de prévisualisation) */
.thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.thumbnail.photo {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #e9ecef;
}

.thumbnail.photo .thumbnail-icon {
    display: none;
}

/* Icône dans le thumbnail (emoji pour remplacer l'image) */
.thumbnail-icon {
    font-size: 72px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Durée de la vidéo en bas à droite du thumbnail */
.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 3px 4px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
}

/* Informations de la vidéo sous le thumbnail */
.video-info {
    display: flex;
    gap: 12px;
}

/* Avatar de la chaîne (petit cercle coloré) */
.channel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}

/* Détails de la vidéo (titre et meta) */
.video-details {
    flex: 1;
}

/* Titre de la vidéo */
.video-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #0f0f0f;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta informations (chaîne, vues, date) */
.video-meta {
    font-size: 12px;
    color: #606060;
    line-height: 1.4;
}

/* ==============================================
   RESPONSIVE DESIGN
   Adaptation pour différentes tailles d'écran
   ============================================== */

/* Tablettes et petits écrans */
@media (max-width: 1024px) {
    .sidebar {
        width: 72px;
    }

    .main-content {
        margin-left: 72px;
    }

    /* Cache le texte des items de navigation, garde juste les icônes */
    .nav-item span {
        display: none;
    }

    .nav-item {
        justify-content: center;
        padding: 16px;
    }

    .nav-title,
    .signin-prompt,
    .nav-divider {
        display: none;
    }

    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* Smartphones */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Cache complètement la sidebar */
    }

    .main-content {
        margin-left: 0;
        padding: 16px;
    }

    .header-center {
        flex: 1;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .search-box {
        max-width: none;
    }

    .voice-btn {
        display: none;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .header {
        padding: 0 8px;
    }

    .header-left {
        gap: 8px;
    }

    .logo svg {
        width: 75px;
    }

    .btn-signin {
        padding: 6px 10px;
        font-size: 13px;
    }

    .video-title {
        font-size: 13px;
    }

    .video-meta {
        font-size: 11px;
    }
}
style.css

Les points clés du CSS

bodyUne marge en haut évite que le contenu passe sous le header fixe.
headerposition: fixed le garde visible pendant le défilement.
.main-containerdisplay: flex aligne la barre latérale et le contenu.
.sidebarFixée à gauche, elle occupe toute la hauteur moins celle du header.
.main-contentLaisse la place de la barre latérale et occupe le reste de l’écran.
ResponsiveTrois media queries (1024, 768 et 480 px) adaptent la grille.
ℹ️
Pourquoi CSS Grid pour les vidéos ?

Avec grid-template-columns, le nombre de colonnes s’adapte automatiquement à la largeur de l’écran, sans calcul compliqué. C’est la technique idéale pour une grille de cartes.

Étape 4 : créer la page Historique (pages/history.html)

Cette page simule l’historique de YouTube. Elle reprend exactement le même header, puis affiche un titre « Historique », un état vide (icône, message et bouton « Se connecter ») et un lien de retour vers l’accueil.

ℹ️
Important

La page doit importer la feuille de style avec ../style.css et réutiliser les mêmes classes que l’accueil pour rester cohérente.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Historique - YouTube</title>
    <link rel="stylesheet" href="../style.css">
    <link rel="icon" href="https://www.youtube.com/s/desktop/d743f786/img/favicon_32x32.png">
    <style>
        .history-container {
            margin-left: 240px;
            padding: 24px;
            padding-top: 80px;
        }

        .history-header {
            margin-bottom: 24px;
        }

        .history-header h1 {
            font-size: 24px;
            font-weight: 400;
            color: #0f0f0f;
            margin-bottom: 8px;
        }

        .history-controls {
            display: flex;
            gap: 16px;
            margin-bottom: 24px;
        }

        .filter-chip {
            padding: 8px 16px;
            background-color: #f2f2f2;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .filter-chip:hover {
            background-color: #e5e5e5;
        }

        .filter-chip.active {
            background-color: #0f0f0f;
            color: #ffffff;
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .history-item {
            display: flex;
            gap: 16px;
            padding: 8px;
            border-radius: 8px;
            transition: background-color 0.2s;
            cursor: pointer;
        }

        .history-item:hover {
            background-color: #f2f2f2;
        }

        .history-thumbnail {
            width: 168px;
            aspect-ratio: 16/9;
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }

        .history-details {
            flex: 1;
        }

        .history-title {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.4;
            color: #0f0f0f;
            margin-bottom: 4px;
        }

        .history-meta {
            font-size: 12px;
            color: #606060;
            line-height: 1.4;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-icon {
            font-size: 80px;
            margin-bottom: 20px;
        }

        .empty-state h2 {
            font-size: 20px;
            color: #0f0f0f;
            margin-bottom: 8px;
        }

        .empty-state p {
            font-size: 14px;
            color: #606060;
        }

        .back-link {
            display: inline-block;
            margin-bottom: 24px;
            padding: 10px 16px;
            background-color: #065fd4;
            color: white;
            text-decoration: none;
            border-radius: 18px;
            font-size: 14px;
            font-weight: 500;
            transition: background-color 0.2s;
        }

        .back-link:hover {
            background-color: #0046a5;
        }
    </style>
</head>
<body>
    <!-- Réutilisation du header de la page principale -->
    <header class="header">
        <div class="header-left">
            <button class="icon-btn menu-btn">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
                </svg>
            </button>
            <a href="../index.html" class="logo">
                <svg viewBox="0 0 90 20" width="90" height="20">
                    <g>
                        <path fill="#FF0000" d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 0 14.285 0 14.285 0C14.285 0 5.35042 0 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C0 5.35042 0 10 0 10C0 10 0 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z"/>
                        <path fill="#FFFFFF" d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z"/>
                    </g>
                    <text x="34" y="16" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#000000">YouTube</text>
                </svg>
            </a>
        </div>
        <div class="header-center">
            <div class="search-box">
                <input type="text" placeholder="Rechercher" class="search-input">
                <button class="search-btn">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                </button>
            </div>
        </div>
        <div class="header-right">
            <button class="btn-signin">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
                Se connecter
            </button>
        </div>
    </header>

    <!-- Contenu principal -->
    <div class="history-container">
        <a href="../index.html" class="back-link">← Retour à l'accueil</a>

        <div class="history-header">
            <h1>Historique des vidéos regardées</h1>
        </div>

        <!-- Filtres -->
        <div class="history-controls">
            <button class="filter-chip active">Tout</button>
            <button class="filter-chip">Aujourd'hui</button>
            <button class="filter-chip">Cette semaine</button>
            <button class="filter-chip">Ce mois-ci</button>
        </div>

        <!-- État vide - affiché quand l'utilisateur n'est pas connecté -->
        <div class="empty-state">
            <div class="empty-icon">📺</div>
            <h2>Votre historique de visionnage est vide</h2>
            <p>Connectez-vous pour voir votre historique de vidéos regardées</p>
            <br>
            <button class="btn-signin" style="margin: 0 auto;">
                <svg viewBox="0 0 24 24" width="24" height="24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
                    <path d="M12 6v6l4 2"/>
                </svg>
                Se connecter
            </button>
        </div>

        <!-- Liste d'historique (commentée car l'utilisateur n'est pas connecté) -->
        <!--
        <div class="history-list">
            <div class="history-item">
                <div class="history-thumbnail" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    🎮
                </div>
                <div class="history-details">
                    <div class="history-title">Top 10 des jeux les plus attendus de 2025</div>
                    <div class="history-meta">GamerZone • 2,5 M de vues • Regardée il y a 2 heures</div>
                </div>
            </div>
        </div>
        -->
    </div>
</body>
</html>
pages/history.html
Page Historique de l'interface YouTube en HTML et CSS avec état vide et bouton de connexion
La page « Historique » avec son état vide

Étape 5 : relier les pages entre elles

  • Dans la barre latérale, ajoute un lien vers pages/history.html
  • Dans history.html, le lien de retour pointe vers ../index.html
  • Le logo renvoie toujours vers l’accueil
  • Teste la navigation dans les deux sens et sur mobile
Logo GitHubTélécharger le code source du projet sur GitHub

Aller plus loin

Ajouter un menu burger sur mobile

Sur petit écran, la barre latérale peut s’ouvrir et se fermer grâce au bouton menu. Ajoute ce CSS à la fin de style.css :

@media (max-width: 768px) {
  .sidebar {
    display: block;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }
}
style.css

Puis ce petit script juste avant la balise </body> de index.html :

const menuBtn = document.querySelector('.menu-btn');
const sidebar = document.querySelector('.sidebar');

menuBtn.addEventListener('click', () => {
  sidebar.classList.toggle('is-open');
});
script.js

D’autres idées pour enrichir ton interface YouTube :

FAQ : questions fréquentes

Faut-il du JavaScript pour cette interface YouTube ?

Non, l’interface YouTube est entièrement réalisée en HTML et CSS. Le JavaScript n’est utile que pour les interactions, comme le menu burger proposé dans la section « Aller plus loin ».

Pourquoi mes miniatures n’ont-elles pas toutes la même taille ?

Applique aspect-ratio: 16 / 9 et object-fit: cover sur les images des cartes : elles garderont toutes le même format, quelle que soit leur taille d’origine.

Le contenu passe sous le header, comment corriger ?

Comme le header est en position fixed, ajoute au body une marge supérieure égale à la hauteur du header (ici 56 px).

Puis-je utiliser ce projet dans mon portfolio ?

Oui, c’est un excellent projet à montrer. Précise simplement qu’il s’agit d’une reproduction à but pédagogique.

Bravo, ton interface YouTube en HTML et CSS est terminée ! Tu sais maintenant structurer une vraie mise en page d’application avec Flexbox et CSS Grid. Une question ou une amélioration à partager ? Laisse un commentaire ci-dessous.

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *