YouTube Clone Using HTML, CSS and JavaScript With Source Code
Introduction :
This project is a YouTube clone built using HTML, CSS, and JavaScript. The objective is to replicate the user interface and some fundamental features of YouTube, providing a functional and visually similar experience. This includes a navigation bar, sidebar, video listing, and a responsive design that adapts to different screen sizes.
Explanation :
Project Structure
HTML Structure:
- Document Setup: The HTML file starts with the standard
<!DOCTYPE html>
declaration, ensuring compatibility with modern browsers. Thehead
section contains metadata, links to the CSS stylesheet, and the title of the document. - Body Elements:
- Navigation Bar (
nav
): Contains the main navigation elements including the menu icon, YouTube logo, search bar, voice search, and user icons (upload, notifications, and user profile). - Sidebar (
div.sidebar
): A vertical menu on the left side of the page, containing shortcut links (Home, Explore, Subscription, etc.) and a list of subscribed channels. - Main Content (
div.container
): The primary area displaying a list of video thumbnails, each with associated information such as title, uploader, views, and upload date.
- Navigation Bar (
- Document Setup: The HTML file starts with the standard
CSS Styling:
- Global Styles: Basic styles are applied to all elements using the universal selector (
*
), including margin, padding, font-family, and box-sizing. - Navigation Bar: Flexbox is used to align items horizontally. Specific styles are applied to elements like the menu icon, logo, search box, and user icons to ensure a cohesive layout.
- Sidebar: The sidebar is styled to be fixed and vertically scrollable, with distinct sections for shortcut links and subscriptions. A smaller version of the sidebar (
small-sidebar
) hides text elements, showing only icons. - Main Content: The video list is displayed using a CSS Grid layout, allowing for a responsive design that adapts to different screen sizes.
- Global Styles: Basic styles are applied to all elements using the universal selector (
JavaScript Logic (side-bar.js):
- Menu Toggle Functionality: The JavaScript code enables toggling the sidebar between a full view and a compact view. This is done by adding or removing CSS classes (
small-sidebar
andlarge-container
) when the menu icon is clicked.
- Menu Toggle Functionality: The JavaScript code enables toggling the sidebar between a full view and a compact view. This is done by adding or removing CSS classes (
Purpose of Functions and Elements
Navigation Bar:
- Menu Icon: Toggles the visibility and size of the sidebar.
- Logo: Provides branding and a link to the homepage.
- Search Box: Allows users to search for videos.
- Voice Search Icon: Represents voice search functionality (though not implemented in this code).
- User Icons: Includes upload, notifications, and user profile, providing access to various user actions.
Sidebar:
- Shortcut Links: Quick access to main sections like Home, Explore, and Subscriptions.
- Subscriptions: Displays a list of subscribed channels for quick navigation.
Main Content:
- Video Listings: Each video thumbnail links to a detailed video page. The layout adapts to the screen size using a grid system.
JavaScript Functions:
- Menu Toggle: Enhances user experience by allowing the sidebar to be collapsed, freeing up more space for the main content.
Conclusion :
This YouTube clone project demonstrates the use of HTML for structuring the web page, CSS for styling and responsive design, and JavaScript for interactive functionality. By breaking down the structure and logic, this explanation provides a comprehensive understanding of how the different parts of the project work together to create a functional and aesthetically pleasing web application.
Source Code :
index.html
video-1.html
Video 9| Elon musk and TATA
Surprisingly a good singer
megan summers
19.4K subscribers
Dude at my school turns out to have a voice.
Subscribe to megan summers
16,303 Commnets
SORT BY
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
video-2.html
Video 9| Elon musk and TATA
Indian boy singing "Gulabi Aankhein" on streets of Jaipur!!
Tron Wilder
37.7K subscribers
Here's a video of me performing "Gulabi Aankhein" at GT Central in Jaipur, Rajasthan.
Instagram: https://www.instagram.com/tron_wilder/
#gulabiaankhein #busking #reactions
Subscribe to megan summers
594 Commnets
SORT BY
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias,
nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
video-3.html
Video 9| Elon musk and TATA
Te Amo (Unplugged) | Raghav Chaitanya
Raghav Chaitanya
556K subscribers
Hi Lovely People! I know this is an old song but still is one of the best compositions of Pritam
sir. I hope you guys will like Te Amo in my voice!
Subscribe to Raghav Chaitanya
1,059 Commnets
SORT BY
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias,
nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
video-9.html
Video 9| Elon musk and TATA
Elon Musk on Ratan Tata and Nano
M3 Motivation
8.04K subscribers
In An Old Interview,Elon Musk Talks About Indian Industrialist And Philanthropist Ratan Tata and
His Affordable Car Project Nano.
Subscribe to M3 Motivation
768 Commnets
SORT BY
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
video-12.html
Video 9| Elon musk and TATA
Raanjhanaa || A R Rahman || Mirchi Unplugged Season 1||
Ayush Patel
2.88K subscribers
all the rights of this video is reserved with the respective owners ||
Subscribe to Ayush Patel
87 Commnets
SORT BY
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Atinder Kumar 2 Day ago
Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he
talks about him. Ratan Tata is a gem .
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?
Avalin Vines
1.1M Views
style.css
* {
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #5a5a5a;
}
img {
cursor: pointer;
}
.flex-div {
display: flex;
align-items: center;
}
nav {
padding: 0px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.nav-right img {
width: 25px;
margin-right: 25px;
}
.nav-right .user-icon {
width: 35px;
margin-right: 0px;
border-radius: 50%;
}
.nav-left .menu-icon {
width: 22px;
margin-right: 25px;
}
.nav-left .logo {
width: 130px;
}
.nav-middle .mic-icon {
width: 16px;
}
.nav-middle .search-box {
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
/* border-radius: 25px; */
}
.nav-middle .search-box input {
width: 400px;
border: 0;
outline: 0;
background: transparent;
}
.nav-middle .search-box img {
width: 15px;
}
/* sidebar */
.sidebar {
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
top: 0;
padding-left: 2%;
padding-top: 98px;
}
.shortcut-links a img {
width: 20px;
margin-right: 20px;
}
.shortcut-links a {
display: flex;
align-items: center;
margin-bottom: 20px;
width: fit-content;
flex-wrap: wrap;
margin-top: 13px;
}
.shortcut-links a:first-child {
color: #ed3833;
}
.sidebar hr {
border: 0;
height: 1px;
background: #ccc;
width: 85%;
}
.subscribed-list h3 {
font-size: 13px;
margin: 20px 0;
color: #5a5a5a;
}
.subscribed-list a {
display: flex;
align-items: center;
margin-bottom: 20px;
width: fit-content;
flex-wrap: wrap;
}
.subscribed-list a img {
width: 25px;
border-radius: 50%;
margin-right: 28px;
}
.small-sidebar {
width: 5%;
}
.small-sidebar .shortcut-links a p,
.small-sidebar .subscribed-list a,
.small-sidebar h3 {
display: none;
}
.small-sidebar hr {
width: 50%;
margin-bottom: 25px;
display: none;
}
/* main Body */
.container {
background: #f9f9f9;
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.large-container {
padding-left: 7%;
}
.banner {
width: 100%;
display: none;
}
.banner img {
width: 100%;
border-radius: 8px;
}
.list-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vid-list .thumbnail {
width: 100%;
border-radius: 5px;
}
.vid-list .flex-div {
align-items: flex-start;
margin-top: 7px;
}
.vid-list .flex-div img {
width: 35px;
margin-right: 10px;
border-radius: 50%;
}
.vid-info {
color: #5a5a5a;
font-size: 13px;
}
.vid-info a {
color: black;
font-weight: 600;
display: block;
margin: bottom 5px;
;
}
@media (max-width: 900px) {
.menu-icon {
display: none;
}
.sidebar {
display: none;
}
.container,
.large-container {
padding-left: 5%;
padding-right: 5%;
}
/* .nav-right img{
display: none;
} */
.nav-right .user-icon {
display: block;
width: 30px;
}
.nav-middle .search-box {
width: 100px;
display: none;
}
.nav-middle .mic-icon {
display: none;
}
.logo {
width: 90px;
}
}
/******* Video -9 *****/
.play-container {
padding-left: 2% !important;
}
.row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.play-video {
flex-basis: 69%;
}
.right-sidebar {
flex-basis: 30%;
}
.play-video video {
width: 100%;
}
.side-video-list {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.side-video-list img {
width: 100%;
}
.side-video-list .small-thumbnail {
flex-basis: 49%;
}
.side-video-list .vid-info {
flex-basis: 49%;
}
.play-video .tags a {
color: #0000ff;
font-size: 13px;
}
.play-video h3 {
font-weight: 600;
font-size: 22px;
margin-top: 12px;
}
.play-video .play-video-info {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 5px;
font-size: 14px;
color: #5a5a5a;
}
.play-video .play-video-info a img {
width: 20px;
margin-right: 8px;
}
.play-video .play-video-info a {
display: inline-flex;
align-items: center;
margin-left: 15px;
}
.play-video hr {
border: 0;
height: 1px;
background: #ccc;
margin: 10px 0;
}
.owner {
display: flex;
align-items: center;
margin-top: 20px;
}
.owner div {
flex: 1;
line-height: 18px;
}
.owner img {
width: 40px;
border-radius: 50%;
margin-right: 15px;
}
.owner p {
color: #000;
font-weight: 600;
font-size: 18px;
}
.owner span {
font-size: 13px;
color: #5a5a5a;
}
.owner button {
background: #ed3833;
color: #fff;
padding: 8px 30px;
border: 0;
outline: 0;
border-radius: 4px;
cursor: pointer;
}
.vid-des {
padding-left: 55px;
margin: 15px 0;
}
.vid-des p {
font-size: 14px;
margin-bottom: 5px;
color: #5a5a5a;
}
.vid-des .cmnt {
display: flex;
margin-top: 15px;
}
.cmnt img {
width: 24px;
height: 17px;
margin-left: 46px;
margin-right: 14px;
}
.vid-des h4 {
font-size: 14px;
color: #5a5a5a;
/* margin-top: 15px; */
}
.add-cmnt {
display: flex;
align-items: center;
margin: 30px 0;
}
.add-cmnt img {
width: 35px;
border-radius: 50%;
margin-right: 15px;
}
.add-cmnt input {
border: 0;
outline: 0;
border-bottom: 1px solid #5a5a5a;
width: 100%;
padding-top: 10px;
background: transparent;
}
.old-cmnt {
display: flex;
align-items: center;
margin: 20px 0;
}
.old-cmnt img {
width: 35px;
border-radius: 50%;
margin-right: 15px;
}
.old-cmnt h3 {
font-size: 14px;
margin-bottom: 2px;
}
.old-cmnt h3 span {
font-size: 12px;
color: #5a5a5a;
font-weight: 500;
margin-left: 8px;
}
.old-cmnt .cmnt-react {
display: flex;
align-items: center;
margin: 8px 0;
font-size: 14px;
}
.old-cmnt .cmnt-react img {
width: 20px;
border-radius: 0;
margin-right: 5px;
}
.old-cmnt .cmnt-react span {
margin-right: 20px;
color: #5a5a5a;
}
.old-cmnt .cmnt-react div {
color: blue;
display: block;
}
.hide-hr {
display: none;
}
@media (max-width: 900px) {
.play-video {
flex-basis: 100%;
}
.right-sidebar {
flex-basis: 100%;
margin-top: 35px;
}
.play-container {
padding-left: 5%;
}
.vid-des {
padding-left: 5px;
}
.play-video .play-video-info a {
margin-left: 0;
margin-right: 15px;
margin-top: 15px;
}
.hide-hr {
display: block;
}
}
side-bar.js
console.log( 'Code is Poetry' );let menuIcon = document.querySelector(".menu-icon");
let sidebar = document.querySelector(".sidebar");
let container = document.querySelector(".container");
// let menuIcon = document.querySelector(".menu-icon")
menuIcon.onclick = function () {
sidebar.classList.toggle("small-sidebar");
container.classList.toggle("large-container");
}
Output :
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
Find More Projects
Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …
COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …
Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …
Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …
KBC Game using Python with Source Code Introduction : Welcome to this blog post on building a “Kaun Banega Crorepati” (KBC) game …
Basic Logging System in C++ With Source Code Introduction : It is one of the most important practices in software development. Logging …