Recréation YouTube - Best Videos

Top vidéos sélectionnées

Une interface de démonstration qui joue et affiche les meilleures vidéos.

Catégorie

Chargement...

:root { --bg: #0f0f12; --surface: #111214; --muted: #9aa4b2; --accent: #ff0000; --card: #141416; --text: #e6eef8; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, Roboto, Arial, sans-serif; background: linear-gradient(180deg, #071021 0%, var(--bg) 100%); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-bottom: 1px solid rgba(255,255,255,0.03); position: sticky; top: 0; z-index: 10; } .topbar .brand { display: flex; align-items: center; gap: 12px; } .topbar h1 { font-size: 18px; margin: 0; letter-spacing: 0.2px; } #menu-toggle { background: transparent; border: none; color: var(--text); font-size: 20px; cursor: pointer; } .search { flex: 1; display: flex; justify-content: center; gap: 8px; padding: 0 18px; } .search input { width: 60%; max-width: 640px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--text); outline: none; } .search button { padding: 10px 12px; border-radius: 8px; border: none; background: var(--accent); color: white; cursor: pointer; } .actions button { margin-left: 8px; padding: 8px 10px; border-radius: 8px; border: none; background: rgba(255,255,255,0.03); color: var(--text); cursor: pointer; } .layout { display: flex; gap: 18px; padding: 18px; } .sidebar { width: 220px; background: transparent; border-right: 1px solid rgba(255,255,255,0.02); padding: 12px; } .sidebar nav ul { list-style: none; padding: 0; margin: 0; } .sidebar nav li { padding: 10px; border-radius: 6px; cursor: pointer; color: var(--muted); } .sidebar nav li.active, .sidebar nav li:hover { background: rgba(255,255,255,0.02); color: var(--text); } .filters { margin-top: 18px; } .filters button { display: block; width: 100%; margin-bottom: 8px; padding: 8px; border-radius: 6px; border: none; background: rgba(255,255,255,0.02); color: var(--muted); cursor: pointer; } .main { flex: 1; padding: 6px 12px; min-height: calc(100vh - 120px); } .hero { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0)); border-radius: 8px; margin-bottom: 12px; } .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .video-card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-radius: 10px; overflow: hidden; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; border: 1px solid rgba(255,255,255,0.02); } .video-card:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(2,6,23,0.6); } .thumb { position: relative; width: 100%; height: 160px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 8px; } .duration { background: rgba(0,0,0,0.7); color: #fff; padding: 3px 6px; border-radius: 4px; font-size: 12px; } .card-body { display: flex; gap: 10px; padding: 12px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); flex-shrink: 0; } .meta { flex: 1; } .meta h4 { margin: 0 0 6px 0; font-size: 14px; } .meta p { margin: 0; color: var(--muted); font-size: 13px; } .loader { text-align: center; padding: 18px; color: var(--muted); } .hidden { display: none; } .footer { padding: 20px; text-align: center; color: var(--muted); } .modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 1000; } .modal-content { width: 90%; max-width: 1100px; background: linear-gradient(180deg, var(--surface), rgba(0,0,0,0.4)); border-radius: 8px; padding: 14px; position: relative; color: var(--text); } .modal-content.small { max-width: 480px; } .close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; } .player-wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: start; } #video-player { width: 100%; height: 480px; background: black; border-radius: 6px; } .video-info h3 { margin: 0 0 8px 0; } #related-list .related-item { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.02); cursor: pointer; } #add-video-form { display: grid; gap: 8px; } #add-video-form input { padding: 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); color: var(--text); } #add-video-form button { padding: 10px; border-radius: 6px; background: var(--accent); color: white; border: none; cursor: pointer; } @media (max-width: 900px) { .layout { flex-direction: column; } .sidebar { width: 100%; order: 2; } .player-wrapper { grid-template-columns: 1fr; } #video-player { height: 280px; } } export const videos = [ { id: "kJQP7kiw5Fk", title: "Luis Fonsi - Despacito ft. Daddy Yankee", channel: "Luis Fonsi", views: "7.8B", uploaded: "2017", duration: "4:42", category: "music", description: "Despacito official music video.", tags: ["despacito", "latin", "music"] }, { id: "9bZkp7q19f0", title: "PSY - GANGNAM STYLE(강남스타일) M/V", channel: "officialpsy", views: "4.3B", uploaded: "2012", duration: "4:12", category: "music", description: "Gangnam Style official music video.", tags: ["gangnam", "kpop", "music"] }, { id: "dQw4w9WgXcQ", title: "Rick Astley - Never Gonna Give You Up (Video)", channel: "RickAstleyVEVO", views: "1.2B", uploaded: "2009", duration: "3:33", category: "music", description: "Never Gonna Give You Up official video.", tags: ["rickroll", "80s"] }, { id: "YQHsXMglC9A", title: "Adele - Hello", channel: "AdeleVEVO", views: "3.2B", uploaded: "2015", duration: "6:07", category: "music", description: "Adele's Hello official music video.", tags: ["adele", "pop"] }, { id: "60ItHLz5WEA", title: "Alan Walker - Faded", channel: "AlanWalker", views: "3.4B", uploaded: "2015", duration: "3:32", category: "music", description: "Faded official music video.", tags: ["alan walker", "edm"] }, { id: "CevxZvSJLk8", title: "Katy Perry - Roar (Official)", channel: "KatyPerryVEVO", views: "3.4B", uploaded: "2013", duration: "3:42", category: "music", description: "Roar official video.", tags: ["katy perry", "pop"] }, { id: "e-ORhEE9VVg", title: "Taylor Swift - Blank Space", channel: "TaylorSwiftVEVO", views: "3.2B", uploaded: "2014", duration: "4:32", category: "music", description: "Blank Space music video.", tags: ["taylor swift", "pop"] }, { id: "fJ9rUzIMcZQ", title: "Queen – Bohemian Rhapsody (Official Video Remastered)", channel: "QueenOfficial", views: "1.6B", uploaded: "2008", duration: "6:07", category: "music", description: "Bohemian Rhapsody remastered official video.", tags: ["queen", "rock"] } ]; export function createVideoCard(video) { const card = document.createElement("article"); card.className = "video-card"; card.dataset.videoId = video.id; const thumb = document.createElement("div"); thumb.className = "thumb"; thumb.style.backgroundImage = `url('https://img.youtube.com/vi/${video.id}/hqdefault.jpg')`; const duration = document.createElement("div"); duration.className = "duration"; duration.textContent = video.duration || "0:00"; thumb.appendChild(duration); const body = document.createElement("div"); body.className = "card-body"; const avatar = document.createElement("div"); avatar.className = "avatar"; avatar.style.backgroundImage = `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))`; const meta = document.createElement("div"); meta.className = "meta"; const title = document.createElement("h4"); title.textContent = video.title; const sub = document.createElement("p"); sub.textContent = `${video.channel} • ${video.views} vues • ${video.uploaded}`; meta.appendChild(title); meta.appendChild(sub); body.appendChild(avatar); body.appendChild(meta); card.appendChild(thumb); card.appendChild(body); // Click opens player card.addEventListener("click", () => { const event = new CustomEvent("play-video", { detail: { id: video.id } }); window.dispatchEvent(event); }); return card; } import { videos as seedVideos } from "./data.js"; import { createVideoCard } from "./components/videoCard.js"; const state = { videos: [], pageSize: 6, page: 0, query: "", category: "all", sort: null }; const elements = { grid: document.getElementById("videos-grid"), loader: document.getElementById("loader"), resultsInfo: document.getElementById("results-info"), searchInput: document.getElementById("search-input"), searchBtn: document.getElementById("search-btn"), gridViewBtn: document.getElementById("grid-view"), listViewBtn: document.getElementById("list-view"), categorySelect: document.getElementById("category-select"), playerModal: document.getElementById("player-modal"), playerIframe: document.getElementById("video-player"), playerTitle: document.getElementById("player-title"), playerMeta: document.getElementById("player-meta"), playerDesc: document.getElementById("player-description"), relatedList: document.getElementById("related-list"), addVideoBtn: document.getElementById("add-video-btn"), addVideoModal: document.getElementById("add-video-modal"), addVideoForm: document.getElementById("add-video-form"), menuToggle: document.getElementById("menu-toggle"), sidebar: document.getElementById("sidebar"), themeToggle: document.getElementById("theme-toggle") }; function init() { // Initialize dataset (clone seed to allow adding) state.videos = [...seedVideos]; bindEvents(); resetAndLoad(); } function bindEvents() { elements.searchBtn.addEventListener("click", onSearch); elements.searchInput.addEventListener("keydown", (e) => { if (e.key === "Enter") onSearch(); }); elements.gridViewBtn.addEventListener("click", () => toggleView("grid")); elements.listViewBtn.addEventListener("click", () => toggleView("list")); elements.categorySelect.addEventListener("change", (e) => { state.category = e.target.value; resetAndLoad(); }); window.addEventListener("scroll", onScroll); window.addEventListener("play-video", (e) => { openPlayer(e.detail.id); }); document.getElementById("close-player").addEventListener("click", closePlayer); document.getElementById("close-add").addEventListener("click", closeAddModal); elements.addVideoBtn.addEventListener("click", openAddModal); elements.addVideoForm.addEventListener("submit", onAddVideo); elements.menuToggle.addEventListener("click", () => { elements.sidebar.classList.toggle("hidden"); }); document.querySelectorAll(".sidebar nav li").forEach((li) => { li.addEventListener("click", () => { document.querySelectorAll(".sidebar nav li").forEach((n) => n.classList.remove("active")); li.classList.add("active"); const filter = li.dataset.filter; elements.categorySelect.value = filter === "home" ? "all" : filter; state.category = elements.categorySelect.value; resetAndLoad(); }); }); document.querySelectorAll(".filters button[data-sort]").forEach((btn) => { btn.addEventListener("click", () => { state.sort = btn.dataset.sort; resetAndLoad(); }); }); document.getElementById("clear-filters").addEventListener("click", () => { state.sort = null; state.query = ""; elements.searchInput.value = ""; elements.categorySelect.value = "all"; state.category = "all"; resetAndLoad(); }); elements.themeToggle.addEventListener("click", toggleTheme); } function toggleTheme() { const root = document.documentElement; if (root.style.getPropertyValue("--bg") === "#0f0f12") { // light root.style.setProperty("--bg", "#ffffff"); root.style.setProperty("--surface", "#ffffff"); root.style.setProperty("--text", "#0b1220"); root.style.setProperty("--muted", "#4b5563"); } else { root.style.setProperty("--bg", "#0f0f12"); root.style.setProperty("--surface", "#111214"); root.style.setProperty("--text", "#e6eef8"); root.style.setProperty("--muted", "#9aa4b2"); } } function resetAndLoad() { state.page = 0; elements.grid.innerHTML = ""; loadMore(); } function loadMore() { const start = state.page * state.pageSize; const filtered = getFilteredVideos(); const chunk = filtered.slice(start, start + state.pageSize); chunk.forEach((v) => { const card = createVideoCard(v); elements.grid.appendChild(card); }); state.page++; updateResultsInfo(filtered.length); if (start + state.pageSize >= filtered.length) { elements.loader.classList.add("hidden"); } else { elements.loader.classList.remove("hidden"); } } function getFilteredVideos() { let list = [...state.videos]; if (state.query) { const q = state.query.toLowerCase(); list = list.filter((v) => (v.title + " " + v.channel + " " + (v.tags || []).join(" ")).toLowerCase().includes(q)); } if (state.category && state.category !== "all") { list = list.filter((v) => v.category === state.category); } if (state.sort === "popular") { list.sort((a, b) => (parseViews(b.views) - parseViews(a.views))); } else if (state.sort === "recent") { list.sort((a, b) => (parseInt(b.uploaded) - parseInt(a.uploaded))); } return list; } function parseViews(v) { if (typeof v === "number") return v; if (!v) return 0; if (v.endsWith("B")) return parseFloat(v) * 1_000_000_000; if (v.endsWith("M")) return parseFloat(v) * 1_000_000; if (v.endsWith("K")) return parseFloat(v) * 1_000; return parseFloat(v.replace(/\D/g, "")) || 0; } function updateResultsInfo(total) { elements.resultsInfo.textContent = `${total} résultats • affichés ${elements.grid.children.length}`; } function onSearch() { state.query = elements.searchInput.value.trim(); resetAndLoad(); } function onScroll() { const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 120; if (nearBottom) { const filtered = getFilteredVideos(); if (state.page * state.pageSize < filtered.length) { loadMore(); } } } function toggleView(type) { if (type === "grid") { elements.grid.classList.remove("list"); elements.gridViewBtn.classList.add("active"); elements.listViewBtn.classList.remove("active"); } else { elements.grid.classList.add("list"); elements.gridViewBtn.classList.remove("active"); elements.listViewBtn.classList.add("active"); } } function openPlayer(videoId) { const video = state.videos.find((v) => v.id === videoId) || { id: videoId, title: "Lecture de la vidéo", channel: "", views: "", uploaded: "", description: "" }; elements.playerIframe.src = `https://www.youtube.com/embed/${video.id}?autoplay=1&rel=0`; elements.playerTitle.textContent = video.title; elements.playerMeta.textContent = `${video.channel} • ${video.views} vues • ${video.uploaded}`; elements.playerDesc.textContent = video.description || ""; renderRelated(videoId); elements.playerModal.classList.remove("hidden"); } function closePlayer() { elements.playerIframe.src = ""; elements.playerModal.classList.add("hidden"); } function renderRelated(currentId) { elements.relatedList.innerHTML = ""; const related = state.videos.filter((v) => v.id !== currentId).slice(0, 6); related.forEach((r) => { const item = document.createElement("div"); item.className = "related-item"; item.innerHTML = `

${r.title}

${r.channel} • ${r.views}

`; item.addEventListener("click", () => { openPlayer(r.id); window.scrollTo({ top: 0, behavior: "smooth" }); }); elements.relatedList.appendChild(item); }); } function openAddModal() { elements.addVideoModal.classList.remove("hidden"); } function closeAddModal() { elements.addVideoModal.classList.add("hidden"); elements.addVideoForm.reset(); } function extractYouTubeId(input) { if (!input) return null; input = input.trim(); // If it's just an ID if (/^[a-zA-Z0-9_-]{11}$/.test(input)) return input; try { const url = new URL(input); if (url.hostname.includes("youtu.be")) { return url.pathname.slice(1); } if (url.searchParams.has("v")) { return url.searchParams.get("v"); } // fallback last segment const segs = url.pathname.split("/"); return segs.pop() || segs.pop(); } catch { return null; } } function onAddVideo(e) { e.preventDefault(); const url = document.getElementById("video-url").value; const title = document.getElementById("video-title").value; const channel = document.getElementById("video-channel").value; const id = extractYouTubeId(url); if (!id) { alert("ID YouTube invalide."); return; } const newVideo = { id, title: title || `Vidéo ajoutée - ${id}`, channel: channel || "Utilisateur", views: "0", uploaded: "2025", duration: "0:00", category: "all", description: "Vidéo ajoutée par l utilisateur." }; state.videos.unshift(newVideo); closeAddModal(); resetAndLoad(); // Auto open if first openPlayer(id); } // Initial render init();