Building a website like YouTube is a popular project for web developers who want to enhance their skills in front-end development. While a full-scale YouTube clone requires complex back-end development and server infrastructure, you can create a simplified version using only HTML, CSS, and JavaScript. Here’s a breakdown of the essential steps you should take and key concepts to focus on when creating a basic YouTube-like interface.
Structuring the Page with HTML
The first step in creating a YouTube clone is to establish the basic structure of the webpage using HTML. HTML (Hypertext Markup Language) provides the backbone of your website by organizing content into sections. To create a YouTube-like interface, your page should have the following main sections:
- Header: This section includes the logo, a search bar, and navigation icons. In YouTube clones, the header is usually sticky, meaning it remains at the top of the page as the user scrolls. You can use the <header> tag to define this area.
- Sidebar: YouTube has a left-hand navigation menu with links to Home, Trending, Subscriptions, Library, etc. This can be created using an
<aside>tag or a<nav>element. - Main Content Area: The main content area displays video thumbnails, titles, and channels. A grid layout is a common approach, with each video represented as a card.
- Video Player: For each video, create a separate page that displays a video player, title, description, and comments section.
The HTML structure lays the groundwork, allowing you to easily style and manipulate the content using CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Homepage Clone | Codingtutorials</title>
<!-- Linking Unicons For Icons -->
<link data-minify="1" rel="stylesheet" href="https://codingtutorials.in/wp-content/cache/min/1/release/v4.0.8/css/line.css?ver=1737166073">
<link rel="stylesheet" href="style.css">
</head>
<body class="sidebar-hidden">
<div class="container">
<!-- Header / Navbar -->
<header>
<nav class="navbar">
<div class="nav-section nav-left">
<button class="nav-button menu-button">
<i class="uil uil-bars"></i>
</button>
<a href="#" class="nav-logo">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Logo" class="logo-image" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Logo" class="logo-image"></noscript>
<h2 class="logo-text">@Coding_Academy</h2>
</a>
</div>
<div class="nav-section nav-center">
<form action="#" class="search-form">
<input type="search" placeholder="Search" class="search-input" required>
<button class="nav-button search-button">
<i class="uil uil-search"></i>
</button>
</form>
<button class="nav-button mic-button">
<i class="uil uil-microphone"></i>
</button>
</div>
<div class="nav-section nav-right">
<button class="nav-button search-button">
<i class="uil uil-search"></i>
</button>
<button class="nav-button theme-button">
<i class="uil uil-moon"></i>
</button>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="User Image" class="user-image" data-lazy-src="images/user.jpg"><noscript><img decoding="async" src="images/user.jpg" alt="User Image" class="user-image"></noscript>
</div>
</nav>
</header>
<!-- Main Layout -->
<main class="main-layout">
<div class="screen-overlay"></div>
<!-- Sidebar -->
<aside class="sidebar">
<div class="nav-section nav-left">
<button class="nav-button menu-button">
<i class="uil uil-bars"></i>
</button>
<a href="#" class="nav-logo">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Logo" class="logo-image" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Logo" class="logo-image"></noscript>
<h2 class="logo-text">@Coding_Academy</h2>
</a>
</div>
<div class="links-container">
<div class="link-section">
<a href="#" class="link-item">
<i class="uil uil-estate"></i> Home
</a>
<a href="#" class="link-item">
<i class="uil uil-video"></i> Shorts
</a>
<a href="#" class="link-item">
<i class="uil uil-tv-retro"></i> Subscriptions
</a>
</div>
<div class="section-separator"></div>
<div class="link-section">
<h4 class="section-title">You</h4>
<a href="#" class="link-item">
<i class="uil uil-user-square"></i> Your channel
</a>
<a href="#" class="link-item">
<i class="uil uil-history"></i> History
</a>
<a href="#" class="link-item">
<i class="uil uil-clock"></i> Watch later
</a>
</div>
<div class="section-separator"></div>
<div class="link-section">
<h4 class="section-title">Explore</h4>
<a href="#" class="link-item">
<i class="uil uil-fire"></i> Trending
</a>
<a href="#" class="link-item">
<i class="uil uil-music"></i> Music
</a>
<a href="#" class="link-item">
<i class="uil uil-basketball"></i> Gaming
</a>
<a href="#" class="link-item">
<i class="uil uil-trophy"></i> Sports
</a>
</div>
<div class="section-separator"></div>
<div class="link-section">
<h4 class="section-title">More from YouTube</h4>
<a href="#" class="link-item">
<i class="uil uil-shield-plus"></i> YouTube Plus
</a>
<a href="#" class="link-item">
<i class="uil uil-headphones-alt"></i> YouTube Music
</a>
<a href="#" class="link-item">
<i class="uil uil-airplay"></i> YouTube Kids
</a>
</div>
<div class="section-separator"></div>
<div class="link-section">
<a href="#" class="link-item">
<i class="uil uil-setting"></i> Settings
</a>
<a href="#" class="link-item">
<i class="uil uil-file-medical-alt"></i> Report
</a>
<a href="#" class="link-item">
<i class="uil uil-question-circle"></i> Help
</a>
<a href="#" class="link-item">
<i class="uil uil-exclamation-triangle"></i> Feedback
</a>
</div>
</div>
</aside>
<div class="content-wrapper">
<!-- Category List -->
<div class="category-list" style="overflow-x: scroll">
<button class="category-button active">All</button>
<button class="category-button">Website</button>
<button class="category-button">Music</button>
<button class="category-button">Gaming</button>
<button class="category-button">Node.js</button>
<button class="category-button">JavaScript</button>
<button class="category-button">React.js</button>
<button class="category-button">TypeScript</button>
<button class="category-button">Coding</button>
<button class="category-button">Next.js</button>
<button class="category-button">Data analysis</button>
<button class="category-button">Web design</button>
<button class="category-button">HTML</button>
<button class="category-button">Tailwind</button>
<button class="category-button">CSS</button>
<button class="category-button">Express.js</button>
</div>
<!-- Video List -->
<div class="video-list">
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/J4eGvwoZzxk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLD60_UAtdXEPcHUiUlf1Jtd70FYFA"><noscript><img decoding="async" src="https://i.ytimg.com/vi/J4eGvwoZzxk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLD60_UAtdXEPcHUiUlf1Jtd70FYFA" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">10:03</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">JavaScript EXPERT Shares Top XML Data Display Techniques</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">2K Views • 1 months ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/V7Qvuc-sS8Q/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBTSLHr0wRjZooP_VqyNoNHCsRa0Q"><noscript><img decoding="async" src="https://i.ytimg.com/vi/V7Qvuc-sS8Q/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBTSLHr0wRjZooP_VqyNoNHCsRa0Q" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">23:45</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">Top Web Developer Reveals Best Subscription Form Design Techniques</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">40 Views • 3 Days ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/8Y7fUm9MUHg/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBf1Jf0Z4RkWHzWusdU9tiI0MxPpA"><noscript><img decoding="async" src="https://i.ytimg.com/vi/8Y7fUm9MUHg/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBf1Jf0Z4RkWHzWusdU9tiI0MxPpA" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">29:43</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">Want Secure Uploads? Master PHP Image and Size Validation Now</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">111 Views • 6 days ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/gmU3JCQtZQ8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBAsh02hnb1QibDjFyO2RKiZEttPA"><noscript><img decoding="async" src="https://i.ytimg.com/vi/gmU3JCQtZQ8/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBAsh02hnb1QibDjFyO2RKiZEttPA" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">38:45</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">JavaScript Emoji Magic: How to Add Emojis to Text! </h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">57K Views • 11 months ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/fOqpef8Pvso/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB3UXrNERjAa3AfEW-ZB2FS0KsFlw"><noscript><img decoding="async" src="https://i.ytimg.com/vi/fOqpef8Pvso/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB3UXrNERjAa3AfEW-ZB2FS0KsFlw" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">19:27</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">How to Use the Weather API for Beginners: A Step-by-Step Guide to Accessing Weather Data</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">24K Views • 1 year ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/DKow0VoPdqU/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhdIF0oXTAP&rs=AOn4CLAFJez_u-vM_O3_46CThhFxsl4NBg"><noscript><img decoding="async" src="https://i.ytimg.com/vi/DKow0VoPdqU/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhdIF0oXTAP&rs=AOn4CLAFJez_u-vM_O3_46CThhFxsl4NBg" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">16:24</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">How to create api in javascript</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">14.2K Views • 4 days ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/cJbO-55NDb4/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCFtQVzTEDPyH1pBefR72UXIF5RIw"><noscript><img decoding="async" src="https://i.ytimg.com/vi/cJbO-55NDb4/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCFtQVzTEDPyH1pBefR72UXIF5RIw" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">37:13</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">GET Data from API & Display in HTML with JavaScript Fetch API</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">1M Views • 1 year ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/sXxApTpz3dE/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhGIFoocjAP&rs=AOn4CLAY3FiT3xHfiX3myH9bkY0YlPIU1g"><noscript><img decoding="async" src="https://i.ytimg.com/vi/sXxApTpz3dE/hqdefault.jpg?sqp=-oaymwE2CNACELwBSFXyq4qpAygIARUAAIhCGAFwAcABBvABAfgB_gmAAtAFigIMCAAQARhGIFoocjAP&rs=AOn4CLAY3FiT3xHfiX3myH9bkY0YlPIU1g" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">9:27</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">JavaScript Registration Form Validation Tutorial</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">17K Views • 10 months ago</p>
</div>
</div>
</a>
<a href="#" class="video-card">
<div class="thumbnail-container">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail" class="thumbnail" data-lazy-src="https://i.ytimg.com/vi/gEgHtLZhzgk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLC5_QMWL-HLSP0EFDYrC8fR_wqEtw"><noscript><img decoding="async" src="https://i.ytimg.com/vi/gEgHtLZhzgk/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLC5_QMWL-HLSP0EFDYrC8fR_wqEtw" alt="Video Thumbnail" class="thumbnail"></noscript>
<p class="duration">25:27</p>
</div>
<div class="video-info">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Channel Logo" class="icon" data-lazy-src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj"><noscript><img decoding="async" src="https://yt3.googleusercontent.com/DRtVBjk2Noax94hHqr8yCcEjhNUhHRvyzBE3qS9WWilnE1-uQQNVnQd8mdG9h_IvNZCRApZSQw=s176-c-k-c0x00ffffff-no-rj" alt="Channel Logo" class="icon"></noscript>
<div class="video-details">
<h2 class="title">Add, Subtract, Multiply, Divide Form Input Text</h2>
<p class="channel-name">Codingtutorials</p>
<p class="views">157K Views • 9 months ago</p>
</div>
</div>
</a>
</div>
</div>
</main>
</div>
<!-- Linking custom script -->
<script type="rocketlazyloadscript" src="script.js" defer></script>
</body>
</html>
Designing with CSS
CSS (Cascading Style Sheets) is used to style elements and make the interface visually appealing. In a website like YouTube, you will need to focus on creating a clean and intuitive user interface. Key CSS concepts include:
- Flexbox and Grid Layouts: Use Flexbox or CSS Grid to create responsive layouts. Flexbox is ideal for headers and navigation, while CSS Grid works well for video thumbnails and the video player area.
- Responsive Design: A good YouTube clone should be mobile-friendly. Use media queries to adjust the layout based on different screen sizes. This includes resizing navigation menus, resizing thumbnails, and adjusting text and icons.
- Colors and fonts: Choose colors that match the YouTube theme or your personalized style. Use CSS for font styles, sizes, and colors that ensure readability.
CSS allows you to apply hover effects to video thumbnails, clickable links for navigation, and visually separate the header, sidebar, and main content area.
/* Importing Google Font - Open Sans */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
/* Color variables for light theme */
:root {
--white-color: #fff;
--black-color: #000;
--light-white-color: #f0f0f0;
--light-gray-color: #e5e5e5;
--border-color: #ccc;
--primary-color: #3b82f6;
--secondary-color: #404040;
--overlay-dark-color: rgba(0, 0, 0, 0.6);
}
/* Color variables for dark theme */
.dark-mode {
--white-color: #171717;
--black-color: #d4d4d4;
--light-white-color: #333;
--light-gray-color: #404040;
--border-color: #808080;
--secondary-color: #d4d4d4;
}
body {
background: var(--white-color);
}
.container {
display: flex;
overflow: hidden;
max-height: 100vh;
flex-direction: column;
}
header, .sidebar .nav-left, .category-list {
position: sticky;
top: 0;
z-index: 10;
background: var(--white-color);
}
.navbar {
display: flex;
gap: 2rem;
align-items: center;
padding: 0.5rem 1rem;
justify-content: space-between;
}
:where(.navbar, .sidebar) .nav-section {
gap: 1rem;
}
:where(.navbar, .sidebar) :where(.nav-section, .nav-logo, .search-form) {
display: flex;
align-items: center;
}
:where(.navbar, .sidebar) :where(.logo-image, .user-image) {
width: 32px;
cursor: pointer;
border-radius: 50%;
}
:where(.navbar, .sidebar) .nav-section .nav-button {
border: none;
height: 40px;
width: 40px;
cursor: pointer;
background: none;
border-radius: 50%;
}
:where(.navbar, .sidebar) .nav-section .nav-button:hover {
background: var(--light-gray-color) !important;
}
:where(.navbar, .sidebar) .nav-button i {
font-size: 1.5rem;
display: flex;
color: var(--black-color);
align-items: center;
justify-content: center;
}
:where(.navbar, .sidebar) .nav-logo {
display: flex;
gap: 0.5rem;
text-decoration: none;
}
:where(.navbar, .sidebar) .nav-logo .logo-text {
color: var(--black-color);
font-size: 1.25rem;
}
.navbar .nav-center {
gap: 0.5rem;
width: 100%;
display: flex;
justify-content: center;
}
.navbar .search-form {
flex: 1;
height: 40px;
max-width: 550px;
}
.navbar .search-form .search-input {
width: 100%;
height: 100%;
font-size: 1rem;
padding: 0 1rem;
outline: none;
color: var(--black-color);
background: var(--white-color);
border-radius: 3.1rem 0 0 3.1rem;
border: 1px solid var(--border-color);
}
.navbar .search-form .search-input:focus {
border-color: var(--primary-color);
}
.navbar .search-form .search-button {
height: 40px;
width: auto;
padding: 0 1.25rem;
border-radius: 0 3.1rem 3.1rem 0;
border: 1px solid var(--border-color);
border-left: 0;
}
.navbar .nav-center .mic-button {
background: var(--light-white-color);
}
.navbar .nav-right .search-button {
display: none;
}
.main-layout {
display: flex;
overflow-y: auto;
scrollbar-color: #a6a6a6 transparent;
}
.main-layout .sidebar {
width: 280px;
overflow: hidden;
padding: 0 0.7rem 0;
background: var(--white-color);
}
.main-layout .sidebar .nav-left {
display: none;
padding: 0.5rem 0.3rem;
}
body.sidebar-hidden .main-layout .sidebar {
width: 0;
padding: 0;
}
.sidebar .links-container {
padding: 1rem 0 2rem;
overflow-y: auto;
height: calc(100vh - 60px);
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.sidebar .links-container:hover {
scrollbar-color: #a6a6a6 transparent;
}
.sidebar .link-section .link-item {
display: flex;
color: var(--black-color);
white-space: nowrap;
align-items: center;
font-size: 0.938rem;
padding: 0.37rem 0.75rem;
margin-bottom: 0.25rem;
border-radius: 0.5rem;
text-decoration: none;
}
.sidebar .link-section .link-item:hover {
background: var(--light-gray-color);
}
.sidebar .link-section .link-item i {
font-size: 1.4rem;
margin-right: 0.625rem;
}
.sidebar .link-section .section-title {
color: var(--black-color);
font-weight: 600;
font-size: 0.938rem;
margin: 1rem 0 0.5rem 0.5rem;
}
.sidebar .section-separator {
height: 1px;
margin: 0.64rem 0;
background: var(--light-gray-color);
}
.main-layout .content-wrapper {
padding: 0 1rem;
overflow-x: hidden;
width: 100%;
}
.content-wrapper .category-list {
display: flex;
overflow-x: auto;
gap: 0.75rem;
padding: 0.75rem 0 0.7rem;
scrollbar-width: none;
}
.category-list .category-button {
border: none;
cursor: pointer;
font-weight: 500;
font-size: 0.94rem;
border-radius: 0.5rem;
white-space: nowrap;
color: var(--black-color);
padding: 0.4rem 0.75rem;
background: var(--light-gray-color);
}
.category-list .category-button.active {
color: var(--white-color);
background: var(--black-color);
pointer-events: none;
}
.dark-mode .category-list .category-button.active {
filter: brightness(120%);
}
.category-list .category-button:not(.active):hover {
background: var(--border-color);
}
.content-wrapper .video-list {
display: grid;
gap: 1rem;
padding: 1.25rem 0 4rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.video-list .video-card {
text-decoration: none;
}
.video-list .video-card .thumbnail-container {
position: relative;
}
.video-list .video-card .thumbnail {
width: 100%;
object-fit: contain;
border-radius: 0.5rem;
aspect-ratio: 16 / 9;
background: var(--light-white-color);
}
.video-list .video-card .duration {
position: absolute;
right: 0.65rem;
bottom: 0.8rem;
color: #fff;
font-size: 0.875rem;
padding: 0 0.3rem;
border-radius: 0.3rem;
background: var(--overlay-dark-color);
}
.video-list .video-card .video-info {
display: flex;
gap: 0.7rem;
padding: 0.7rem 0.5rem;
}
.video-list .video-card .icon {
width: 36px;
height: 36px;
border-radius: 50%;
}
.video-list .video-card .title {
font-size: 1rem;
color: var(--black-color);
font-weight: 600;
line-height: 1.375;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.video-list .video-card:hover .title {
color: var(--primary-color);
}
.video-list .video-card p {
font-size: 0.875rem;
color: var(--secondary-color);
}
.video-list .video-card .channel-name {
margin: 0.25rem 0 0.15rem;
}
/* Responsive media code for small devices */
@media (max-width: 768px) {
.navbar .nav-center {
display: none;
}
.navbar .nav-right .search-button {
display: block;
}
.main-layout .screen-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 15;
width: 100%;
height: 100vh;
background: var(--overlay-dark-color);
transition: 0.2s ease;
}
body.sidebar-hidden .main-layout .screen-overlay {
opacity: 0;
pointer-events: none;
}
.main-layout .sidebar {
position: absolute;
left: 0;
top: 0;
z-index: 20;
height: 100vh;
transition: 0.2s ease;
}
body.sidebar-hidden .main-layout .sidebar {
left: -280px;
}
.main-layout .sidebar .nav-left {
display: flex;
}
}
Adding Interactivity with JavaScript
JavaScript brings interactivity and dynamic behavior to your website like YouTube. This allows the website to feel interactive and responsive to user input. Here are some ways to use JavaScript effectively:
- Search Bar Functionality: Use JavaScript to add a search feature. Although you won’t have a back-end database, you can create a simple search filter that filters the displayed video thumbnails based on user input.
- Video Player: Use HTML5’s
<video>element for the video player. JavaScript can control the video playback, including play, pause, volume control, and fullscreen options. - Dynamic content loading: Simulate dynamic content by loading video data (title, description, and thumbnail) from a JSON file or local array. This can give the illusion of pulling data from the database.
- Toggle Sidebar: Create a toggle button using JavaScript to open and close the sidebar, mimicking YouTube’s behavior when the screen size changes or when the user wants to hide/show the menu.
const menuButtons = document.querySelectorAll(".menu-button");
const screenOverlay = document.querySelector(".main-layout .screen-overlay");
const themeButton = document.querySelector(".navbar .theme-button i");
// Toggle sidebar visibility when menu buttons are clicked
menuButtons.forEach(button => {
button.addEventListener("click", () => {
document.body.classList.toggle("sidebar-hidden");
});
});
// Toggle sidebar visibility when screen overlay is clicked
screenOverlay.addEventListener("click", () => {
document.body.classList.toggle("sidebar-hidden");
});
// Initialize dark mode based on localStorage
if (localStorage.getItem("darkMode") === "enabled") {
document.body.classList.add("dark-mode");
themeButton.classList.replace("uil-moon", "uil-sun");
} else {
themeButton.classList.replace("uil-sun", "uil-moon");
}
// Toggle dark mode when theme button is clicked
themeButton.addEventListener("click", () => {
const isDarkMode = document.body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", isDarkMode ? "enabled" : "disabled");
themeButton.classList.toggle("uil-sun", isDarkMode);
themeButton.classList.toggle("uil-moon", !isDarkMode);
});
// Show sidebar on large screens by default
if (window.innerWidth >= 768) {
document.body.classList.remove("sidebar-hidden");
}
Enhancing User Experience
To make your YouTube-like website more attractive, consider adding these features:
- Hover Effects: Use CSS and JavaScript to implement hover effects. For example, you can enlarge video thumbnails or display additional information when hovering over them.
- Video Playlist: Create a video playlist that allows users to click on thumbnails and load the video in the main player section without refreshing the page. This can be achieved with JavaScript by dynamically updating the content of the video player.
- Like, Share, and Comment Buttons: Add interactive buttons for likes, shares, and comments. These buttons can use JavaScript to display a simple counter for likes or trigger pop-ups for sharing options.
Conclusion
Creating a simplified YouTube clone using HTML, CSS, and JavaScript is a great way to practice front-end development. Although the project won’t have the full functionality of a platform like YouTube, you will gain a solid understanding of HTML structure, CSS styling, and JavaScript interactivity. Remember, the key to creating a successful clone lies in attention to detail, responsive design, and making the interface intuitive for users. Once you have a working version, you can continue adding features and experimenting with more advanced JavaScript frameworks or backend integrations for a fully functional video platform.
Youtube Clone Source Code
Send download link to:
