YouTube Clone
Posted inHTML CSS JavaScript

YouTube Clone Project: Full Source Code & Explanation for Beginners

No Comments

Welcome to CodeWithTanveer! In this blog post, I’ll walk you through the step-by-step process of creating a YouTube clone using just HTML, CSS, and JavaScript. This project is perfect for web development beginners who want to understand how to build a responsive video-sharing platform interface.

Why Build a YouTube Clone?

Building a YouTube clone helps you learn:

  • Responsive web design principles
  • Video player implementation
  • Dynamic content loading
  • UI/UX best practices for media platforms
  • JavaScript DOM manipulation

Project Overview

Our YouTube clone will include:

  1. A navigation bar with logo and search functionality
  2. Video player section
  3. Video suggestions sidebar
  4. Comment section
  5. Responsive design that works on different screen sizes

Step 1: Setting Up the Project Structure

Create these files in your project folder:

  • index.html – Main HTML file
  • styles.css – For styling
  • script.js – For functionality

Step 2: HTML Structure

We’ll start with the basic HTML5 boilerplate and create sections for:

  • Header with navigation
  • Main content area (video player + sidebar)
  • Footer

Step 3: Styling with CSS

We’ll use CSS to:

  • Create a responsive layout with Flexbox/Grid
  • Style the video player and controls
  • Design the video cards in the sidebar
  • Make the interface mobile-friendly

Step 4: Adding JavaScript Functionality

Our JavaScript will handle:

  • Video playback controls
  • Dynamic loading of video suggestions
  • Search functionality
  • Interactive elements like likes and comments

Complete Code Implementation

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Clone - CodeWithTanveer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header/Navbar -->
    <header class="header">
        <div class="logo-container">
            <i class="fas fa-bars menu-icon"></i>
            <div class="logo">
                <i class="fab fa-youtube youtube-icon"></i>
                <span>YouTube</span>
            </div>
        </div>
        
        <div class="search-container">
            <input type="text" placeholder="Search" class="search-bar">
            <button class="search-button"><i class="fas fa-search"></i></button>
            <i class="fas fa-microphone mic-icon"></i>
        </div>
        
        <div class="icons-container">
            <i class="fas fa-video"></i>
            <i class="fas fa-bell"></i>
            <i class="fas fa-user-circle user-icon"></i>
        </div>
    </header>

    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-item active">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-fire"></i>
            <span>Trending</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-compass"></i>
            <span>Explore</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-subscription"></i>
            <span>Subscriptions</span>
        </div>
        <hr>
        <div class="sidebar-item">
            <i class="fas fa-video"></i>
            <span>Library</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-history"></i>
            <span>History</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-clock"></i>
            <span>Watch Later</span>
        </div>
        <div class="sidebar-item">
            <i class="fas fa-thumbs-up"></i>
            <span>Liked Videos</span>
        </div>
        <hr>
        <h3 class="subscriptions-title">SUBSCRIPTIONS</h3>
        <div class="sidebar-item">
            <div class="channel-avatar">T</div>
            <span>Tech Channel</span>
        </div>
        <div class="sidebar-item">
            <div class="channel-avatar">G</div>
            <span>Gaming</span>
        </div>
        <div class="sidebar-item">
            <div class="channel-avatar">M</div>
            <span>Music</span>
        </div>
        <div class="sidebar-item">
            <div class="channel-avatar">C</div>
            <span>Cooking</span>
        </div>
    </aside>

    <!-- Main Content -->
    <main class="main-content">
        <div class="categories">
            <div class="category active">All</div>
            <div class="category">Music</div>
            <div class="category">Gaming</div>
            <div class="category">Live</div>
            <div class="category">Programming</div>
            <div class="category">Cooking</div>
            <div class="category">Recently uploaded</div>
            <div class="category">Watched</div>
            <div class="category">New to you</div>
        </div>
        <div class="videos-container">
            <!-- Video cards will be added here by JavaScript -->
        </div>
    </main>

<script src="script.js"></script>
</body>
</html>

style.css

   /* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', Arial, sans-serif;
}

body {
    background-color: #f9f9f9;
}

/* Header Styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.logo-container {
    display: flex;
    align-items: center;
}

.menu-icon {
    font-size: 1.2rem;
    margin-right: 1.5rem;
    cursor: pointer;
}

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.youtube-icon {
    color: red;
    font-size: 1.8rem;
    margin-right: 0.3rem;
}

.logo span {
    font-size: 1.2rem;
    font-weight: bold;
}

.search-container {
    display: flex;
    align-items: center;
    flex: 0.6;
    max-width: 600px;
}

.search-bar {
    width: 100%;
    padding: 0.5rem 1.2rem;
    border: 1px solid #ccc;
    border-radius: 2rem 0 0 2rem;
    /* font-size: 1rem; */
    outline: none;
}

.search-button {
    padding: 0.5rem 1.2rem;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 2rem 2rem 0;
    background-color: #f8f8f8;
    cursor: pointer;
}

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

.mic-icon {
    margin-left: 1rem;
    padding: 0.5rem;
    background-color: #f9f9f9;
    border-radius: 50%;
    cursor: pointer;
}

.icons-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.icons-container i {
    font-size: 1.2rem;
    cursor: pointer;
}

.user-icon {
    font-size: 1.8rem;
}

/* Sidebar Styles */
.sidebar {
    width: 240px;
    background-color: white;
    height: calc(100vh - 56px);
    position: fixed;
    top: 56px;
    left: 0;
    overflow-y: auto;
    padding: 0.8rem 0;
    transition: transform 0.3s ease;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
}

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

.sidebar-item.active {
    background-color: #e5e5e5;
}

.sidebar-item i {
    margin-right: 1.5rem;
    font-size: 1.2rem;
}

.sidebar-item span {
    font-size: 0.9rem;
}

.sidebar hr {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    margin: 0.8rem 0;
}

.subscriptions-title {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    color: #606060;
    text-transform: uppercase;
}

.channel-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #065fd4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    margin-right: 1.5rem;
}

/* Main Content Styles */
.main-content {
    margin-left: 240px;
    padding: 1.5rem;
    padding-top: 0;
    margin-top: 56px;
}

.categories {
    display: flex;
    padding: 1rem 0;
    overflow-x: auto;
    white-space: nowrap;
    position: sticky;
    top: 56px;
    background-color: white;
    z-index: 90;
}

.category {
    padding: 0.5rem 0.8rem;
    margin-right: 0.8rem;
    background-color: #f2f2f2;
    border-radius: 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.category:hover {
    background-color: #e5e5e5;
}

.category.active {
    background-color: #0f0f0f;
    color: white;
}

.videos-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.video-card {
    cursor: pointer;
}

.video-thumbnail {
    position: relative;
    margin-bottom: 0.8rem;
}

.video-thumbnail img {
    width: 100%;
    border-radius: 0.8rem;
    transition: border-radius 0.3s ease;
}

.video-thumbnail:hover img {
    border-radius: 0;
}

.video-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.8rem;
}

.video-info {
    display: flex;
}

.channel-avatar-small {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #065fd4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    margin-right: 0.8rem;
}

.video-details h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-details p {
    font-size: 0.9rem;
    color: #606060;
    margin-bottom: 0.2rem;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 200;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .search-container {
        flex: 1;
        margin: 0 1rem;
    }
    
    .videos-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 576px) {
    .header {
        padding: 1rem;
    }
    
    .logo span {
        display: none;
    }
    
    .search-button {
        padding: 0.5rem;
    }
    
    .mic-icon {
        margin-left: 0.5rem;
    }
    
    .icons-container {
        gap: 1rem;
    }
    
    .categories {
        padding: 0.8rem 0;
    }
    
    .category {
        padding: 0.4rem 0.6rem;
        margin-right: 0.6rem;
        font-size: 0.8rem;
    }
    
    .videos-container {
        grid-template-columns: 1fr;
    }
}

script.js

 document.addEventListener('DOMContentLoaded', function () {
    // Toggle sidebar on mobile
    const menuIcon = document.querySelector('.menu-icon');
    const sidebar = document.querySelector('.sidebar');

    menuIcon.addEventListener('click', function () {
        sidebar.classList.toggle('active');
    });

    // Video data
    const videos = [
        {
            title: 'Build a Calculator in React JS ⚛️',
            channel: 'CodeWithTanveer',
            views: '1K views',
            time: '3 weeks ago',
            duration: '1:23',
            thumbnail: 'https://i.ytimg.com/vi/GbbMGn7NVcs/hqdefault.jpg',
            channelInitial: 'C'
        },
        {
            title: 'Create a Login & Signup System in PHP & MySQL (XAMPP)',
            channel: 'CodeWithTanveer',
            views: '1K views',
            time: '1 month ago',
            duration: '1:49',
            thumbnail: 'https://i.ytimg.com/vi/x3ZnmzF45_4/hqdefault.jpg',
            channelInitial: 'C'
        },
        {
            title: 'From Zero to Hero: Build a STUNNING Portfolio Website',
            channel: 'CodeWithTanveer',
            views: '3K views',
            time: '1 year ago',
            duration: '1:54',
            thumbnail: 'https://i.ytimg.com/vi/QFlWFInO3HY/hqdefault.jpg',
            channelInitial: 'C'
        },
        {
            title: '🔥 Create a Stunning Card Slider in Minutes! (HTML, CSS, JS + Swiper JS)',
            channel: 'CodeWithTanveer',
            views: '120K views',
            time: '3 days ago',
            duration: '1:30',
            thumbnail: 'https://i.ytimg.com/vi/RaVW8BK_nEs/hqdefault.jpg',
            channelInitial: 'C'
        },
        {
            title: 'Python Pandas Crash Course (2025)',
            channel: 'CodeWithHarry',
            views: '161K views',
            time: '5 months ago',
            duration: '36:56',
            thumbnail: 'https://i.ytimg.com/vi/E9WGC0SLPVs/hq720.jpg',
            channelInitial: 'C'
        },
        {
            title: 'How to Build a Responsive Website | HTML CSS Tutorial',
            channel: 'Web Dev Simplified',
            views: '120K views',
            time: '3 days ago',
            duration: '10:30',
            thumbnail: 'https://i.ytimg.com/vi/ZeDP-rzOnAA/hqdefault.jpg',
            channelInitial: 'W'
        },
        {
            title: 'Learn JavaScript in 1 Hour',
            channel: 'Programming with Mosh',
            views: '1.2M views',
            time: '1 month ago',
            duration: '1:05:30',
            thumbnail: 'https://i.ytimg.com/vi/W6NZfCO5SIk/hqdefault.jpg',
            channelInitial: 'P'
        },
        {
            title: 'CSS Grid Layout Crash Course',
            channel: 'Traversy Media',
            views: '450K views',
            time: '2 weeks ago',
            duration: '28:15',
            thumbnail: 'https://i.ytimg.com/vi/jV8B24rSN5o/hqdefault.jpg',
            channelInitial: 'T'
        },
        {
            title: 'React JS Tutorial for Beginners',
            channel: 'Academind',
            views: '800K views',
            time: '5 months ago',
            duration: '2:12:40',
            thumbnail: 'https://i.ytimg.com/vi/DLX62G4lc44/hqdefault.jpg',
            channelInitial: 'A'
        },
        {
            title: 'Build a Netflix Clone with React',
            channel: 'Clever Programmer',
            views: '350K views',
            time: '3 weeks ago',
            duration: '1:45:22',
            thumbnail: 'https://i.ytimg.com/vi/P7t13SGytRk/hqdefault.jpg',
            channelInitial: 'C'
        },
        {
            title: 'Python Tutorial for Beginners',
            channel: 'freeCodeCamp',
            views: '2.1M views',
            time: '1 year ago',
            duration: '4:26:52',
            thumbnail: 'https://i.ytimg.com/vi/rfscVS0vtbw/hqdefault.jpg',
            channelInitial: 'F'
        },
        {
            title: 'Node.js Crash Course',
            channel: 'The Net Ninja',
            views: '520K views',
            time: '8 months ago',
            duration: '1:02:15',
            thumbnail: 'https://i.ytimg.com/vi/w-7RQ46RgxU/hqdefault.jpg',
            channelInitial: 'N'
        },
        {
            title: 'Vue.js 3 Tutorial for Beginners',
            channel: 'Vue Mastery',
            views: '180K views',
            time: '2 months ago',
            duration: '45:10',
            thumbnail: 'https://i.ytimg.com/vi/FXpIoQ_rT_c/hqdefault.jpg',
            channelInitial: 'V'
        },
        {
            title: 'Build a Weather App with JavaScript',
            channel: 'Dev Ed',
            views: '210K views',
            time: '4 months ago',
            duration: '32:45',
            thumbnail: 'https://i.ytimg.com/vi/w0VEOghdMpQ/hqdefault.jpg',
            channelInitial: 'D'
        },
        {
            title: 'UI/UX Design Tutorial',
            channel: 'DesignCourse',
            views: '150K views',
            time: '3 weeks ago',
            duration: '1:15:30',
            thumbnail: 'https://i.ytimg.com/vi/68w2VwalD5w/hqdefault.jpg',
            channelInitial: 'D'
        },
        {
            title: 'Flutter Tutorial for Beginners',
            channel: 'The Flutter Way',
            views: '95K views',
            time: '1 week ago',
            duration: '1:28:10',
            thumbnail: 'https://i.ytimg.com/vi/1ukSR1GRtMU/hqdefault.jpg',
            channelInitial: 'F'
        },
        {
            title: 'Docker Tutorial for Beginners',
            channel: 'TechWorld with Nana',
            views: '320K views',
            time: '5 months ago',
            duration: '2:10:45',
            thumbnail: 'https://i.ytimg.com/vi/3c-iBn73dDE/hqdefault.jpg',
            channelInitial: 'T'
        },
        {
            title: 'Python Tutorial for Beginners',
            channel: 'freeCodeCamp',
            views: '2.1M views',
            time: '1 year ago',
            duration: '4:26:52',
            thumbnail: 'https://i.ytimg.com/vi/rfscVS0vtbw/hqdefault.jpg',
            channelInitial: 'F'
        },
    ];

    // Render videos
    const videosContainer = document.querySelector('.videos-container');

    videos.forEach(video => {
        const videoCard = document.createElement('div');
        videoCard.className = 'video-card';

        videoCard.innerHTML = `
    <div class="video-thumbnail">
        <img src="${video.thumbnail}" alt="${video.title}">
        <span class="video-duration">${video.duration}</span>
    </div>
    <div class="video-info">
        <div class="channel-avatar-small">${video.channelInitial}</div>
        <div class="video-details">
            <h3>${video.title}</h3>
            <p>${video.channel}</p>
            <p>${video.views} • ${video.time}</p>
        </div>
    </div>
`;

        videosContainer.appendChild(videoCard);
    });

    // Category click event
    const categories = document.querySelectorAll('.category');

    categories.forEach(category => {
        category.addEventListener('click', function () {
            categories.forEach(c => c.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // Sidebar item click event
    const sidebarItems = document.querySelectorAll('.sidebar-item');

    sidebarItems.forEach(item => {
        item.addEventListener('click', function () {
            sidebarItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');

            // Close sidebar on mobile after selection
            if (window.innerWidth <= 768) {
                sidebar.classList.remove('active');
            }
        });
    });
});

Conclusion

By following these steps, you’ll have a functional YouTube clone that demonstrates core web development concepts. Remember, this is a frontend-only implementation – a full video-sharing platform would require backend technologies for user accounts, video storage, and more.

Stay tuned to CodeWithTanveer for more web development tutorials and projects! Don’t forget to subscribe for updates on new content.

Would you like me to elaborate on any specific part of this introduction or provide more details about any section of the YouTube clone implementation?

Tags:

Comments

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

Leave a Reply

Your email address will not be published. Required fields are marked *