Clone YouTube – site de vidéos HTML CSS JavaScript

19 0 Sites web codex Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Clone YouTube – site de vidéos HTML CSS JavaScript

Recommandé

28 July 2023

Animation de couleur de texte CSS

11 February 2026

Intégrer le jeu SnowRider3D Unity (CDN)

21 March 2026

Code HTML d'illustration de tournesol

HTML

<header class="top">
  <button class="ib" id="menu" aria-label="Menu">☰</button>
  <a class="logo" href="#"><span class="play">▶</span>ViewTube</a>
  <form class="sbar" id="sform"><input id="q" placeholder="Search"><button aria-label="Search">🔍</button></form>
  <button class="ib" aria-label="Voice search">🎤</button>
  <div class="right"><button class="ib" aria-label="Upload">➕</button><button class="ib" aria-label="Notifications">🔔</button><div class="me">Y</div></div>
</header>
<div class="layout">
  <aside class="side" id="side">
    <a class="on" href="#">🏠 <span>Home</span></a><a href="#">⚡ <span>Shorts</span></a><a href="#">📺 <span>Subscriptions</span></a>
    <hr><a href="#">🕘 <span>History</span></a><a href="#">▶️ <span>Your videos</span></a><a href="#">⏰ <span>Watch later</span></a><a href="#">👍 <span>Liked videos</span></a>
    <hr><a href="#">🔥 <span>Trending</span></a><a href="#">🎵 <span>Music</span></a><a href="#">🎮 <span>Gaming</span></a><a href="#">⚽ <span>Sports</span></a>
  </aside>
  <main>
    <div class="chips" id="chips"></div>
    <div class="videos" id="videos"></div>
  </main>
</div>
<div class="watch" id="watch">
  <div class="wbox">
    <button class="close" id="close" aria-label="Close">✕</button>
    <div class="player" id="player"><div class="pbig">▶</div><div class="pbar"><i id="pfill"></i></div></div>
    <h2 id="wtitle"></h2>
    <div class="wmeta"><div class="ch"><div class="cav" id="wav"></div><div><b id="wch"></b><small>1.2M subscribers</small></div><button class="sub" id="subbtn">Subscribe</button></div>
      <div class="acts"><button id="likebtn">👍 <span id="likes">12K</span></button><button>👎</button><button>↗ Share</button></div></div>
  </div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f0f0f; color: #f1f1f1; font-family: Roboto, "Segoe UI", Arial, sans-serif; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #0f0f0f; }
.ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #fff; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.ib:hover { background: #272727; }
.logo { display: flex; align-items: center; gap: 4px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: -1px; font-size: 1.25rem; margin-right: auto; }
.play { background: #ff0033; color: #fff; font-size: .7rem; padding: 4px 8px; border-radius: 7px; }
.sbar { display: flex; flex: 0 1 560px; }
.sbar input { flex: 1; min-width: 0; background: #121212; border: 1px solid #303030; border-radius: 40px 0 0 40px; padding: 10px 16px; color: #fff; font-size: 1rem; outline: none; }
.sbar input:focus { border-color: #1c62b9; }
.sbar button { width: 64px; border: 1px solid #303030; border-left: 0; background: #222; border-radius: 0 40px 40px 0; cursor: pointer; }
.right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.me { width: 32px; height: 32px; border-radius: 50%; background: #7b3fe4; display: grid; place-items: center; font-weight: 700; }
.layout { display: flex; }
.side { width: 230px; flex-shrink: 0; padding: 8px 12px; height: calc(100vh - 56px); position: sticky; top: 56px; overflow-y: auto; }
.side a { display: flex; gap: 22px; padding: 10px 12px; border-radius: 10px; color: #f1f1f1; text-decoration: none; font-size: .93rem; }
.side a:hover { background: #272727; } .side a.on { background: #272727; font-weight: 600; }
.side hr { border: 0; border-top: 1px solid #3f3f3f; margin: 10px 0; }
.side.mini { width: 78px; } .side.mini span, .side.mini hr { display: none; }
main { flex: 1; padding: 0 24px 40px; min-width: 0; }
.chips { display: flex; gap: 12px; overflow-x: auto; padding: 12px 0; position: sticky; top: 56px; background: #0f0f0f; z-index: 2; scrollbar-width: none; }
.chips button { white-space: nowrap; border: 0; background: #272727; color: #fff; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.chips button.on { background: #f1f1f1; color: #0f0f0f; }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 16px; margin-top: 12px; }
.v { cursor: pointer; }
.thumb { aspect-ratio: 16/9; border-radius: 12px; position: relative; display: grid; place-items: center; font-size: 3.5rem; transition: border-radius .2s; overflow: hidden; }
.v:hover .thumb { border-radius: 0; }
.dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.8); font-size: .78rem; padding: 2px 5px; border-radius: 4px; font-weight: 600; }
.vinfo { display: flex; gap: 12px; margin-top: 12px; }
.cav { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; }
.vinfo h3 { font-size: 1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vinfo p { color: #aaa; font-size: .88rem; margin-top: 4px; }
.empty { color: #aaa; padding: 40px 0; }
.watch { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 10; display: none; align-items: center; justify-content: center; padding: 20px; }
.watch.on { display: flex; }
.wbox { width: min(900px, 100%); position: relative; }
.close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; }
.player { aspect-ratio: 16/9; border-radius: 12px; position: relative; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.pbig { width: 70px; height: 50px; border-radius: 14px; background: rgba(255,0,51,.9); display: grid; place-items: center; font-size: 1.4rem; }
.player.playing .pbig { opacity: 0; transition: .3s; }
.pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.3); }
.pbar i { display: block; height: 100%; width: 0; background: #ff0033; }
.wbox h2 { margin: 14px 0 10px; font-size: 1.25rem; }
.wmeta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ch { display: flex; align-items: center; gap: 12px; } .ch small { display: block; color: #aaa; font-size: .78rem; }
.sub { background: #f1f1f1; color: #0f0f0f; border: 0; border-radius: 99px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.sub.on { background: #272727; color: #fff; }
.acts { display: flex; gap: 8px; } .acts button { background: #272727; color: #fff; border: 0; border-radius: 99px; padding: 9px 16px; cursor: pointer; }
.acts button.on { background: #3ea6ff; color: #000; }
@media (max-width: 760px) {
  .side { display: none; } .side.mini { display: block; position: fixed; z-index: 6; width: 240px; background: #0f0f0f; } .side.mini span, .side.mini hr { display: initial; }
  .right .ib, .top > .ib:nth-of-type(2) { display: none; }
  main { padding: 0 12px 30px; } .videos { grid-template-columns: 1fr; }
  .logo { font-size: 1rem; margin-right: 0; }
  .top { gap: 6px; padding: 8px 10px; }
  .sbar { flex: 1 1 auto; min-width: 0; }
  .sbar input { width: 100%; padding: 8px 12px; }
  .sbar button { width: 44px; }
  .right { margin-left: 0; }
}

// ViewTube — YouTube clone layout (HTML CSS JS): grid of videos, category chips, search and a watch modal
var CH = [['Tech Daily', '#3ea6ff'], ['Chef Nour', '#ff7a45'], ['Pixel Plays', '#7b3fe4'], ['Travel Lens', '#16c79a'], ['Beat Lab', '#ff2e63'], ['Code Academy', '#ffc93c']];
var CATS = ['All', 'Music', 'Gaming', 'Cooking', 'Coding', 'Travel', 'Tech', 'Live', 'Recently uploaded'];
var V = [
  ['I built a website in 10 minutes with HTML CSS & JavaScript', 5, 'Coding', '💻', '#1e3c72,#2a5298', '12:04'],
  ['Easy 15-minute pasta everyone loves', 1, 'Cooking', '🍝', '#f12711,#f5af19', '8:31'],
  ['Top 10 browser games you can play right now', 2, 'Gaming', '🎮', '#8e2de2,#4a00e0', '15:22'],
  ['Lo-fi beats to study and relax to', 4, 'Music', '🎧', '#ee0979,#ff6a00', '1:02:45'],
  ['Exploring the hidden beaches of Lebanon', 3, 'Travel', '🏖️', '#00b09b,#96c93d', '21:10'],
  ['New phone review: is it worth it?', 0, 'Tech', '📱', '#232526,#414345', '10:48'],
  ['CSS animations every beginner should know', 5, 'Coding', '✨', '#4568dc,#b06ab3', '9:57'],
  ['Making the perfect chocolate cake', 1, 'Cooking', '🎂', '#3a1c71,#d76d77', '13:12'],
  ['Speedrun world record attempt', 2, 'Gaming', '🏁', '#11998e,#38ef7d', 'LIVE'],
  ['Morning piano session', 4, 'Music', '🎹', '#141e30,#243b55', '45:20'],
  ['24 hours in Tokyo', 3, 'Travel', '🗼', '#ff512f,#dd2476', '18:44'],
  ['I tried every AI tool so you don’t have to', 0, 'Tech', '🤖', '#0f2027,#2c5364', '16:05']
];
var cat = 'All', q = '';
function views() { return (Math.random() * 900 + 10 | 0) + 'K views · ' + (Math.random() * 11 + 1 | 0) + ' days ago'; }
V.forEach(function (v) { v.meta = views(); });
var chips = document.getElementById('chips');
CATS.forEach(function (c) {
  var b = document.createElement('button'); b.textContent = c; if (c === cat) b.className = 'on';
  b.onclick = function () { cat = c; chips.querySelectorAll('button').forEach(function (x) { x.classList.toggle('on', x === b); }); render(); };
  chips.appendChild(b);
});
function render() {
  var list = V.filter(function (v) {
    var okCat = cat === 'All' || v[2] === cat || (cat === 'Live' && v[5] === 'LIVE') || cat === 'Recently uploaded';
    return okCat && v[0].toLowerCase().indexOf(q) > -1;
  });
  var box = document.getElementById('videos');
  box.innerHTML = list.length ? '' : '<p class="empty">No results for “' + q + '”</p>';
  list.forEach(function (v) {
    var ch = CH[v[1]], d = document.createElement('div'); d.className = 'v';
    d.innerHTML = '<div class="thumb" style="background:linear-gradient(135deg,' + v[4] + ')">' + v[3] + '<span class="dur"' + (v[5] === 'LIVE' ? ' style="background:#cc0000"' : '') + '>' + v[5] + '</span></div>' +
      '<div class="vinfo"><div class="cav" style="background:' + ch[1] + '">' + ch[0][0] + '</div><div><h3></h3><p>' + ch[0] + '</p><p>' + v.meta + '</p></div></div>';
    d.querySelector('h3').textContent = v[0];
    d.onclick = function () { openVideo(v); };
    box.appendChild(d);
  });
}
document.getElementById('sform').onsubmit = function (e) { e.preventDefault(); q = document.getElementById('q').value.trim().toLowerCase(); render(); };
document.getElementById('q').oninput = function () { q = this.value.trim().toLowerCase(); render(); };
document.getElementById('menu').onclick = function () { document.getElementById('side').classList.toggle('mini'); };

var timer, prog = 0, player = document.getElementById('player');
function openVideo(v) {
  var ch = CH[v[1]];
  document.getElementById('wtitle').textContent = v[0];
  document.getElementById('wch').textContent = ch[0];
  var av = document.getElementById('wav'); av.textContent = ch[0][0]; av.style.background = ch[1];
  player.style.background = 'linear-gradient(135deg,' + v[4] + ')';
  player.classList.remove('playing'); prog = 0; document.getElementById('pfill').style.width = '0';
  document.getElementById('watch').classList.add('on');
}
player.onclick = function () {
  player.classList.toggle('playing'); clearInterval(timer);
  if (player.classList.contains('playing')) timer = setInterval(function () { prog = Math.min(100, prog + .5); document.getElementById('pfill').style.width = prog + '%'; }, 100);
};
document.getElementById('close').onclick = function () { clearInterval(timer); document.getElementById('watch').classList.remove('on'); };
document.getElementById('subbtn').onclick = function () { this.classList.toggle('on'); this.textContent = this.classList.contains('on') ? 'Subscribed' : 'Subscribe'; };
document.getElementById('likebtn').onclick = function () { this.classList.toggle('on'); document.getElementById('likes').textContent = this.classList.contains('on') ? '12K+1' : '12K'; };
render();

Comments 0

…