Table of Contents
Responsive YouTube Clone Html Css | YT Clone Project Code
Welcome🎉 to Code With Random blog. This blog teaches us how we create a YouTube Clone. We use HTML, Css, and javascript for the YouTube Clone. I hope you enjoy our blog so let’s start with a basic HTML structure for the YouTube Clone.Â
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<!-- CSS File -->
<link rel="stylesheet" href="styles.css" />
<title>Final - Youtube UI Clone</title>
</head>
<body>
<!-- Header Starts -->
<div class="header">
<div class="header__left">
<i id="menu" class="material-icons">menu</i>
<img
src="https://www.youtube.com/about/static/svgs/icons/brand-resources/YouTube-logo-full_color_light.svg?cache=72a5d9c"
alt=""
/>
</div>
<div class="header__search">
<form action="">
<input type="text" placeholder="Search" />
<button><i class="material-icons">search</i></button>
</form>
</div>
<div class="header__icons">
<i class="material-icons display-this">search</i>
<i class="material-icons">videocam</i>
<i class="material-icons">apps</i>
<i class="material-icons">notifications</i>
<i class="material-icons display-this">account_circle</i>
</div>
</div>
<!-- Header Ends -->
<!-- Main Body Starts -->
<div class="mainBody">
<!-- Sidebar Starts -->
<div class="sidebar">
<div class="sidebar__categories">
<div class="sidebar__category">
<i class="material-icons">home</i>
<span>Home</span>
</div>
<div class="sidebar__category">
<i class="material-icons">local_fire_department</i>
<span>Trending</span>
</div>
<div class="sidebar__category">
<i class="material-icons">subscriptions</i>
<span>Subcriptions</span>
</div>
</div>
<hr />
<div class="sidebar__categories">
<div class="sidebar__category">
<i class="material-icons">library_add_check</i>
<span>Library</span>
</div>
<div class="sidebar__category">
<i class="material-icons">history</i>
<span>History</span>
</div>
<div class="sidebar__category">
<i class="material-icons">play_arrow</i>
<span>Your Videos</span>
</div>
<div class="sidebar__category">
<i class="material-icons">watch_later</i>
<span>Watch Later</span>
</div>
<div class="sidebar__category">
<i class="material-icons">thumb_up</i>
<span>Liked Videos</span>
</div>
</div>
<hr />
</div>
<!-- Sidebar Ends -->
<!-- Videos Section -->
<div class="videos">
<h1>Recommended</h1>
<div class="videos__container">
<!-- Single Video starts -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<!-- Single Video Ends -->
<!-- Single Video starts -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<!-- Single Video Ends -->
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>
Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn
</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/YpTmcCBBdTE/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img src="http://aninex.com/images/srvc/web_de_icon.png" alt="" />
</div>
<div class="title">
<h3>Build A Password Generator with React JS - Beginners Tutorial</h3>
<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/46cXFUzR9XM/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfNbNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Bella Ciao Full Song | La Casa De Papel | Money Heist | Netflix India</h3>
<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/d2na6sCyM5Q/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>DON'T EVER GIVE UP - Elon Musk (Motivational Video)</h3>
<a href=""> Chispa Motivation</a>
<span>10M Views • 1 Month Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/2Ji-clqUYnA/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF604Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Javascript Fundamentals</h3>
<a href="">Coding Addict</a>
<span>179K • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/3PHXvlpOkf4/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build 15 JavaScript Projects - Vanilla JavaScript Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>470K Views • 8 Months Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/CVClHLwv-4I/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>Build Real Time Face Detection With JavaScript</h3>
<a href=""> Web Dev Simplified </a>
<span>875K Views • 1 Year Ago</span>
</div>
</div>
</div>
<div class="video">
<div class="video__thumbnail">
<img src="https://img.youtube.com/vi/ulprqHHWlng/maxresdefault.jpg" alt="" />
</div>
<div class="video__details">
<div class="author">
<img
src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjqQW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"
alt=""
/>
</div>
<div class="title">
<h3>AWS Basics for Beginners - Full Course</h3>
<a href=""> freeCodeCamp.org </a>
<span>36K Views • 1 Day Ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<!-- Main Body Ends -->
</body>
</html>
There is all the HTML code for the YouTube Clone. Now, you can see an output with a YouTube Clone then we write Css & javascript for the YouTube Clone.
Output
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
/* header */
.material-icons {
color: rgb(96, 96, 96);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 15px;
}
.header__left {
display: flex;
align-items: center;
}
.header__left img {
width: 100px;
margin-left: 15px;
}
.header i {
padding: 0 7px;
cursor: pointer;
}
.header__search form {
border: 1px solid #ddd;
height: 35px;
margin: 0;
padding: 0;
display: flex;
}
.header__search input {
width: 500px;
padding: 10px;
margin: 0;
border-radius: 0;
border: none;
height: 100%;
}
.header__search button {
padding: 0;
margin: 0;
height: 100%;
border: none;
border-radius: 0;
}
/* Sidebar */
.mainBody {
height: calc(100vh - 70px);
display: flex;
overflow: hidden;
}
.sidebar {
height: 100%;
width: 230px;
background-color: white;
overflow-y: scroll;
}
.sidebar__categories {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 15px;
margin-top: 15px;
}
.sidebar__category {
display: flex;
align-items: center;
padding: 12px 25px;
}
.sidebar__category span {
margin-left: 15px;
}
.sidebar__category:hover {
background: #e5e5e5;
cursor: pointer;
}
.sidebar::-webkit-scrollbar {
display: none;
}
hr {
height: 1px;
background-color: #e5e5e5;
border: none;
}
/* videos */
.videos {
background-color: #f9f9f9;
width: 100%;
height: 100%;
padding: 15px 15px;
border-top: 1px solid #ddd;
overflow-y: scroll;
}
.videos__container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.video {
width: 310px;
margin-bottom: 30px;
}
.video__thumbnail {
width: 100%;
height: 170px;
}
.video__thumbnail img {
object-fit: cover;
height: 100%;
width: 100%;
}
.author img {
object-fit: cover;
border-radius: 50%;
height: 40px;
width: 40px;
margin-right: 10px;
}
.video__details {
display: flex;
margin-top: 10px;
}
.title {
display: flex;
flex-direction: column;
}
.title h3 {
color: rgb(3, 3, 3);
line-height: 18px;
font-size: 14px;
margin-bottom: 6px;
}
.title a,
span {
text-decoration: none;
color: rgb(96, 96, 96);
font-size: 14px;
}
h1 {
font-size: 20px;
margin-bottom: 10px;
color: rgb(3, 3, 3);
}
@media (max-width: 425px) {
.header__search {
display: none;
}
.header__icons .material-icons {
display: none;
}
.header__icons .display-this {
display: inline;
}
.sidebar {
display: none;
}
}
@media (max-width: 768px) {
.header__search {
display: none;
}
.sidebar {
display: none;
}
.show-sidebar {
display: inline;
position: fixed;
top: 4.4rem;
height: auto;
}
}
@media (max-width: 941px) {
.header__search input {
width: 300px;
}
}
Css Updated output
Javascript Code
const menu = document.querySelector('#menu');
console.log(menu);
const sidebar = document.querySelector('.sidebar');
console.log(sidebar);
menu.addEventListener('click', function () {
sidebar.classList.toggle('show-sidebar');
});
Final output
Now that we have completed our javascript section, our updated output with javascript. I hope you like the YouTube Clone. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a YouTube Clone using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
Code By – Somanath Goudar
Check out more…..
1. 50 front-end projects html Css