Here's the most YouTube-like implementation yet, with a modern UI, dark/light theme toggle, and realistic video player components: ViewTube

ViewTube

0:00 / 12:34

Building a YouTube Clone with HTML, CSS & JavaScript

120K views • 3 days ago

Web Dev Simplified

1.2M subscribers

In this tutorial, we'll build a YouTube clone using HTML, CSS, and JavaScript. We'll cover responsive design, video grids, and interactive elements to create a realistic YouTube experience. This project is perfect for intermediate web developers looking to improve their frontend skills.

🔔 Subscribe for more web development tutorials!
#webdevelopment #javascript #youtubeclone

1,234 Comments

User123 2 days ago

Great tutorial! Really helped me understand CSS Grid better. The explanation was very clear and the pace was perfect.

Up next

Autoplay

:root { --primary: #ff0000; --primary-dark: #cc0000; --text-primary: #0f0f0f; --text-secondary: #606060; --text-tertiary: #aaa; --border: #e5e5e5; --background: #ffffff; --surface: #f9f9f9; --surface-dark: #f2f2f2; --hover: rgba(0, 0, 0, 0.05); --active: rgba(0, 0, 0, 0.1); } .dark-theme { --primary: #ff0000; --primary-dark: #cc0000; --text-primary: #f1f1f1; --text-secondary: #aaa; --text-tertiary: #717171; --border: #303030; --background: #0f0f0f; --surface: #181818; --surface-dark: #212121; --hover: rgba(255, 255, 255, 0.1); --active: rgba(255, 255, 255, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; } body { background-color: var(--background); color: var(--text-primary); transition: background-color 0.3s, color 0.3s; } .app-container { display: flex; min-height: 100vh; } /* Side Navigation */ .side-nav { width: 240px; height: 100vh; position: fixed; background-color: var(--background); padding: 12px 0; overflow-y: auto; z-index: 100; border-right: 1px solid var(--border); } .logo-container { display: flex; align-items: center; padding: 0 24px 0 16px; height: 56px; margin-bottom: 8px; } .logo-icon { font-size: 24px; color: var(--primary); margin-right: 8px; } .logo-text { font-size: 18px; font-weight: 500; } .nav-section { padding: 12px 0; border-bottom: 1px solid var(--border); } .section-title { font-size: 16px; font-weight: 500; padding: 8px 24px; color: var(--text-secondary); text-transform: uppercase; } .nav-item { display: flex; align-items: center; padding: 8px 24px; text-decoration: none; color: var(--text-primary); border-radius: 10px; margin: 0 8px; transition: background-color 0.2s; } .nav-item i { font-size: 20px; margin-right: 24px; width: 24px; text-align: center; } .nav-item.active { background-color: var(--hover); font-weight: 500; } .nav-item.active i { color: var(--primary); } .nav-item:hover:not(.active) { background-color: var(--hover); } .channel-avatar { width: 24px; height: 24px; border-radius: 50%; background-color: var(--text-secondary); margin-right: 24px; } .channel-avatar.large { width: 48px; height: 48px; margin-right: 16px; } .theme-toggle { display: flex; align-items: center; padding: 12px 24px; margin-top: 12px; cursor: pointer; color: var(--text-primary); } .theme-toggle i { margin-right: 24px; font-size: 20px; } /* Main Content */ .main-content { flex: 1; margin-left: 240px; min-height: 100vh; } .main-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 56px; background-color: var(--background); border-bottom: 1px solid var(--border); } .header-left { display: flex; align-items: center; } .menu-btn { width: 40px; height: 40px; border-radius: 50%; background: none; border: none; margin-right: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-primary); } .menu-btn:hover { background-color: var(--hover); } .search-container { display: flex; align-items: center; flex: 0 1 640px; } .search-bar { display: flex; flex: 1; height: 40px; } .search-bar input { flex: 1; padding: 0 16px; border: 1px solid var(--border); border-right: none; border-radius: 20px 0 0 20px; background-color: transparent; color: var(--text-primary); font-size: 16px; outline: none; } .search-btn { width: 64px; height: 40px; background-color: var(--surface-dark); border: 1px solid var(--border); border-left: none; border-radius: 0 20px 20px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .voice-search-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--surface); border: none; margin-left: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-primary); } .header-right { display: flex; align-items: center; gap: 8px; } .header-btn { width: 40px; height: 40px; border-radius: 50%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-primary); } .header-btn:hover { background-color: var(--hover); } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--text-secondary); margin-left: 8px; cursor: pointer; } .user-avatar.small { width: 40px; height: 40px; } /* Categories */ .categories-bar { position: sticky; top: 56px; z-index: 40; display: flex; align-items: center; padding: 0 24px; height: 56px; background-color: var(--background); border-bottom: 1px solid var(--border); overflow-x: auto; } .category { padding: 8px 12px; margin-right: 12px; background-color: var(--surface); border: none; border-radius: 8px; font-size: 14px; color: var(--text-primary); white-space: nowrap; cursor: pointer; transition: background-color 0.2s; } .category.active { background-color: var(--text-primary); color: var(--background); } .category:hover:not(.active) { background-color: var(--hover); } /* Video Content */ .video-content { display: flex; padding: 24px; } .video-player-section { flex: 2; margin-right: 24px; } .video-container { background-color: var(--surface); border-radius: 12px; overflow: hidden; } .video-placeholder { width: 100%; aspect-ratio: 16/9; background-color: var(--surface-dark); display: flex; align-items: center; justify-content: center; position: relative; } .play-button { width: 72px; height: 72px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); cursor: pointer; } .play-button i { font-size: 28px; color: white; margin-left: 4px; } .video-controls { padding: 12px 16px; background-color: var(--surface); } .progress-bar { height: 4px; background-color: var(--border); border-radius: 2px; margin-bottom: 12px; position: relative; cursor: pointer; } .progress { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; background-color: var(--primary); border-radius: 2px; } .scrubber { position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: var(--primary); border-radius: 50%; opacity: 0; transition: opacity 0.2s; } .progress-bar:hover .scrubber { opacity: 1; } .controls-bar { display: flex; justify-content: space-between; align-items: center; } .left-controls, .right-controls { display: flex; align-items: center; gap: 8px; } .control-btn { background: none; border: none; color: var(--text-primary); font-size: 16px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .control-btn:hover { background-color: var(--hover); } .time-display { font-size: 14px; color: var(--text-secondary); } .video-info { margin-top: 16px; } .video-title { font-size: 20px; font-weight: 500; margin-bottom: 12px; } .video-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; } .video-actions { display: flex; gap: 8px; margin-bottom: 16px; } .action-btn { display: flex; align-items: center; gap: 6px; background-color: var(--surface); border: none; border-radius: 20px; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--text-primary); cursor: pointer; } .action-btn i { font-size: 16px; } .action-btn:hover { background-color: var(--hover); } .channel-info { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 16px; } .channel-details { display: flex; align-items: center; } .channel-name { font-weight: 500; margin-bottom: 4px; } .subscribers { font-size: 14px; color: var(--text-secondary); } .subscribe-btn { background-color: var(--text-primary); color: var(--background); border: none; border-radius: 20px; padding: 10px 16px; font-size: 14px; font-weight: 500; text-transform: uppercase; cursor: pointer; } .subscribe-btn:hover { background-color: var(--text-secondary); } .video-description { background-color: var(--surface); padding: 16px; border-radius: 12px; margin-bottom: 24px; } .description-text { font-size: 14px; line-height: 1.6; white-space: pre-line; } .show-more-btn { background: none; border: none; color: var(--text-secondary); font-weight: 500; font-size: 14px; margin-top: 8px; cursor: pointer; } .comments-section { margin-top: 24px; } .comments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .comments-header h3 { font-size: 18px; } .sort-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; } .add-comment { display: flex; gap: 16px; margin-bottom: 24px; } .comment-input-container { flex: 1; } .comment-input-container input { width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid var(--border); background: none; color: var(--text-primary); font-size: 14px; outline: none; } .comment-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .cancel-btn, .comment-btn { padding: 8px 16px; border: none; border-radius: 20px; font-size: 14px; font-weight: 500; cursor: pointer; } .cancel-btn { background: none; color: var(--text-secondary); } .comment-btn { background-color: var(--surface); color: var(--text-secondary); } .comment-btn:not(:disabled) { background-color: var(--primary); color: white; } .comment { display: flex; gap: 16px; margin-bottom: 16px; } .comment-content { flex: 1; } .comment-author { font-size: 13px; font-weight: 500; margin-bottom: 4px; } .comment-time { font-size: 12px; color: var(--text-secondary); font-weight: normal; margin-left: 8px; } .comment-text { font-size: 14px; margin-bottom: 8px; } .comment-actions { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-secondary); } .like-btn, .dislike-btn, .reply-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-secondary); cursor: pointer; } .like-btn i, .dislike-btn i { font-size: 14px; } .reply-btn { font-weight: 500; } /* Recommended Videos */ .recommended-videos { flex: 1; max-width: 400px; } .recommended-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .recommended-header h3 { font-size: 16px; color: var(--text-secondary); } .autoplay-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); } .toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-switch label { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--text-tertiary); transition: .4s; border-radius: 20px; } .toggle-switch label:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } .toggle-switch input:checked + label { background-color: var(--primary); } .toggle-switch input:checked + label:before { transform: translateX(16px); } .video-list { display: flex; flex-direction: column; gap: 16px; } .video-card { display: flex; gap: 8px; cursor: pointer; } .video-thumbnail { width: 168px; height: 94px; background-color: var(--surface-dark); border-radius: 8px; position: relative; } .video-duration { position: absolute; bottom: 4px; right: 4px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 2px 4px; border-radius: 4px; font-size: 12px; } .video-info-small { flex: 1; } .video-title-small { font-size: 14px; font-weight: 500; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .channel-name-small { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .video-stats-small { font-size: 12px; color: var(--text-secondary); } /* Responsive Design */ @media (max-width: 1312px) { .side-nav { width: 72px; } .side-nav .logo-text, .side-nav .nav-item span, .side-nav .section-title, .side-nav .theme-toggle span { display: none; } .side-nav .nav-item i { margin-right: 0; } .side-nav .channel-avatar { margin-right: 0; } .main-content { margin-left: 72px; } } @media (max-width: 992px) { .video-content { flex-direction: column; } .video-player-section { margin-right: 0; margin-bottom: 24px; } .recommended-videos { max-width: 100%; } .video-list { flex-direction: row; flex-wrap: wrap; } .video-card { flex-direction: column; width: calc(50% - 8px); } .video-thumbnail { width: 100%; } } @media (max-width: 768px) { .search-container { display: none; } .header-right .header-btn:first-child { display: none; } .categories-bar { padding: 0 8px; } .category { padding: 6px 8px; margin-right: 8px; font-size: 12px; } } @media (max-width: 576px) { .video-card { width: 100%; } .video-actions { flex-wrap: wrap; } .action-btn { padding: 6px 12px; font-size: 12px; } } // Sample data for recommended videos const recommendedVideos = [ { id: 1, title: "Learn React in 1 Hour - Full Beginner's Tutorial (2024)", channel: "Programming with Mosh", views: "1.2M views", time: "2 weeks ago", duration: "1:08:22" }, { id: 2, title: "CSS Grid Complete Layout Guide - Practical Examples", channel: "Traversy Media", views: "856K views", time: "1 month ago", duration: "45:13" }, { id: 3, title: "JavaScript Array Methods Crash Course", channel: "Web Dev Simplified", views: "423K views", time: "5 days ago", duration: "18:30" }, { id: 4, title: "Build a Full-Stack Netflix Clone with React & Node.js", channel: "Clever Programmer", views: "1.5M views", time: "3 weeks ago", duration: "1:52:45" }, { id: 5, title: "Node.js & Express.js Crash Course - REST API Development", channel: "Programming with Mosh", views: "987K views", time: "2 months ago", duration: "1:15:10" }, { id: 6, title: "CSS Flexbox Made Simple - Responsive Layouts Explained", channel: "Web Dev Simplified", views: "512K views", time: "1 week ago", duration: "24:52" } ]; // DOM Elements const videoList = document.querySelector('.video-list'); const themeToggle = document.querySelector('.theme-toggle'); const body = document.body; const menuBtn = document.querySelector('.menu-btn'); const sideNav = document.querySelector('.side-nav'); const categories = document.querySelectorAll('.category'); const navItems = document.querySelectorAll('.nav-item'); const searchInput = document.querySelector('.search-bar input'); const searchBtn = document.querySelector('.search-btn'); const commentInput = document.querySelector('.comment-input-container input'); const commentBtn = document.querySelector('.comment-btn'); const cancelBtn = document.querySelector('.cancel-btn'); const playButton = document.querySelector('.play-button'); const videoPlaceholder = document.querySelector('.video-placeholder'); const progressBar = document.querySelector('.progress-bar'); const progress = document.querySelector('.progress'); const scrubber = document.querySelector('.scrubber'); // Initialize renderRecommendedVideos(); // Event Listeners themeToggle.addEventListener('click', toggleTheme); menuBtn.addEventListener('click', toggleSideNav); categories.forEach(category => category.addEventListener('click', setActiveCategory)); navItems.forEach(item => item.addEventListener('click', setActiveNavItem)); searchInput.addEventListener('input', toggleSearchBtn); searchBtn.addEventListener('click', performSearch); commentInput.addEventListener('input', toggleCommentBtn); commentBtn.addEventListener('click', addComment); cancelBtn.addEventListener('click', cancelComment); playButton.addEventListener('click', playVideo); progressBar.addEventListener('click', updateProgress); progressBar.addEventListener('mousemove', showScrubber); progressBar.addEventListener('mouseleave', hideScrubber); // Functions function renderRecommendedVideos() { videoList.innerHTML = ''; recommendedVideos.forEach(video => { const videoElement = document.createElement('div'); videoElement.className = 'video-card'; videoElement.innerHTML = `

${video.duration}

${video.title}

${video.channel}

${video.views} • ${video.time}

`; videoList.appendChild(videoElement); }); } function toggleTheme() { body.classList.toggle('dark-theme'); const icon = themeToggle.querySelector('i'); const text = themeToggle.querySelector('span'); if (body.classList.contains('dark-theme')) { icon.classList.replace('fa-moon', 'fa-sun'); text.textContent = 'Light Mode'; } else { icon.classList.replace('fa-sun', 'fa-moon'); text.textContent = 'Dark Mode'; } } function toggleSideNav() { sideNav.classList.toggle('collapsed'); if (sideNav.classList.contains('collapsed')) { document.querySelector('.main-content').style.marginLeft = '72px'; // Hide text in nav items document.querySelectorAll('.nav-item span').forEach(span => { span.style.display = 'none'; }); // Hide section titles document.querySelectorAll('.section-title').forEach(title => { title.style.display = 'none'; }); // Center icons document.querySelectorAll('.nav-item').forEach(item => { item.style.justifyContent = 'center'; }); } else { document.querySelector('.main-content').style.marginLeft = '240px'; // Show text in nav items document.querySelectorAll('.nav-item span').forEach(span => { span.style.display = 'inline'; }); // Show section titles document.querySelectorAll('.section-title').forEach(title => { title.style.display = 'block'; }); // Reset alignment document.querySelectorAll('.nav-item').forEach(item => { item.style.justifyContent = 'flex-start'; }); } } function setActiveCategory(e) { categories.forEach(category => { category.classList.remove('active'); }); e.currentTarget.classList.add('active'); } function setActiveNavItem(e) { navItems.forEach(item => { item.classList.remove('active'); }); e.currentTarget.classList.add('active'); } function toggleSearchBtn() { if (searchInput.value.trim() !== '') { searchBtn.style.color = 'var(--text-primary)'; } else { searchBtn.style.color = 'var(--text-secondary)'; } } function performSearch() { if (searchInput.value.trim() !== '') { alert(`Searching for: ${searchInput.value}`); searchInput.value = ''; searchBtn.style.color = 'var(--text-secondary)'; } } function toggleCommentBtn() { if (commentInput.value.trim() !== '') { commentBtn.disabled = false; } else { commentBtn.disabled = true; } } function addComment() { if (commentInput.value.trim() !== '') { const commentSection = document.querySelector('.comments-section'); const newComment = document.createElement('div'); newComment.className = 'comment'; newComment.innerHTML = `

You just now

${commentInput.value}

`; commentSection.insertBefore(newComment, commentSection.children[2]); commentInput.value = ''; commentBtn.disabled = true; // Update comment count const commentsHeader = document.querySelector('.comments-header h3'); const commentCount = parseInt(commentsHeader.textContent.split(' ')[0].replace(',', '')) + 1; commentsHeader.textContent = `${commentCount.toLocaleString()} Comments`; } } function cancelComment() { commentInput.value = ''; commentBtn.disabled = true; } function playVideo() { videoPlaceholder.innerHTML = `

Now Playing: Building a YouTube Clone

This is a simulated video player in our YouTube clone

`; // Simulate video progress let progress = 0; const interval = setInterval(() => { progress += 1; document.querySelector('.progress').style.width = `${progress}%`; document.querySelector('.time-display').textContent = `${Math.floor(progress / 100 * 754)} / 12:34`; if (progress >= 100) { clearInterval(interval); } }, 100); } function updateProgress(e) { const progressBarWidth = progressBar.offsetWidth; const clickPosition = e.offsetX; const progressPercentage = (clickPosition / progressBarWidth) * 100; progress.style.width = `${progressPercentage}%`; scrubber.style.left = `${progressPercentage}%`; // Update time display const currentTime = Math.floor(progressPercentage / 100 * 754); // 754 seconds = 12:34 const minutes = Math.floor(currentTime / 60); const seconds = currentTime % 60; document.querySelector('.time-display').textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds} / 12:34`; } function showScrubber(e) { scrubber.style.opacity = '1'; const progressBarWidth = progressBar.offsetWidth; const mousePosition = e.offsetX; const hoverPercentage = (mousePosition / progressBarWidth) * 100; scrubber.style.left = `${hoverPercentage}%`; } function hideScrubber() { scrubber.style.opacity = '0'; }