Clon de YouTube – sitio web de videos HTML CSS JavaScript

18 0 codex Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Clon de YouTube – sitio web de videos HTML CSS JavaScript

Recomendado

17 May 2025

sociedad moderna

20 March 2026

Herramienta de estudio

10 August 2024

Campo de entrada simple

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

…