Creating a YouTube clone using HTML, CSS, and JavaScript involves several steps. This is a simplified version that includes the basic structure and functionalities. For a full-featured clone, you’d need to incorporate backend services, databases, and possibly more advanced frameworks.
Here’s a basic guide to get you started:
index.html
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css">
<title>Youtube Clone</title>
</head>
<body>
<nav class="flex-div">
<div class="nav-left flex-div">
<img src="./images/menu.png" class="menu-icon" alt="" srcset="">
<img src="./images/logo.png" class="logo" alt="" srcset="">
</div>
<div class="nav-middle flex-div">
<div class="search-box flex-div">
<input type="text" placeholder="Search..">
<img src="./images/search.png" alt="" srcset="">
</div>
<img src="./images/voice-search.png" class="mic-icon" alt="" srcset="">
</div>
<div class="nav-right flex-div">
<img src="./images/upload.png" alt="" srcset="">
<img src="./images/more.png" alt="" srcset="">
<img src="./images/notification.png" alt="" srcset="">
<img src="./images/nilava.jpeg" class="user-icon" alt="" srcset="">
</div>
</nav>
<!-- Side Bar -->
<div class="sidebar">
<div class="shortcut-links">
<a href="#"><img src="./images/home.png"><p>Home</p></a>
<a href="#"><img src="./images/explore.png"><p>explore</p></a>
<a href="#"><img src="./images/subscriprion.png"><p>subscriprion</p></a>
<hr>
<a href="#"><img src="./images/library.png"><p>library</p></a>
<a href="#"><img src="./images/history.png"><p>History</p></a>
<a href="#"><img src="./images/playlist.png"><p>playlist</p></a>
<a href="#"><img src="./images/messages.png"><p>messages</p></a>
<a href="#"><img src="./images/show-more.png"><p>Show more</p></a>
<hr>
</div>
<div class="subscribed-list">
<h3>SUBSCRIPTIONS</h3>
<a href="#"><img src="./images/Jack.png"><p>Jack •</p></a>
<a href="#"><img src="./images/simon.png"><p>simon </p></a>
<a href="#"><img src="./images/tom.png"><p>Tom •</p></a>
<a href="#"><img src="./images/megan.png"><p>Megan Fox •</p></a>
<a href="#"><img src="./images/cameron.png"><p>Cameron Green </p></a>
</div>
</div>
<!-- Main Body -->
<div class="container">
<div class="banner">
<img src="./images/banner.png" alt="" srcset="">
</div>
<div class="list-container">
<div class="vid-list">
<a href="video-1.html"> <img src="./images/thumbnail1.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-1.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="video-2.html"> <img src="./images/thumbnail2.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-2.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Ava</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="video-3.html"> <img src="./images/thumbnail3.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-3.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail4.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail5.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail6.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail7.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail8.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="video-9.html"> <img src="./images/thumbnail9.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-9.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail10.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="video-11.html"> <img src="./images/thumbnail11.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-11.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="video-12.html"> <img src="./images/thumbnail12.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="video-12.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail13.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail14.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail15.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail16.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail17.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail18.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail19.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
<div class="vid-list">
<a href="#"> <img src="./images/thumbnail20.png" class="thumbnail" ></a>
<div class="flex-div">
<img src="./images/nilava.jpeg">
<div class="vid-info">
<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>
<p>Avalin</p>
<p>2k Views • 2 days</p>
</div>
</div>
</div>
</div>
</div>
<script src="side-bar.js"></script>
</body>
</html>
video-1.html
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css">
<title>Video 9| Elon musk and TATA</title>
</head>
<body>
<nav class="flex-div">
<div class="nav-left flex-div">
<img src="./images/menu.png" class="menu-icon" alt="" srcset="">
<img src="./images/logo.png" class="logo" alt="" srcset="">
</div>
<div class="nav-middle flex-div">
<div class="search-box flex-div">
<input type="text" placeholder="Search..">
<img src="./images/search.png" alt="" srcset="">
</div>
<img src="./images/voice-search.png" class="mic-icon" alt="" srcset="">
</div>
<div class="nav-right flex-div">
<img src="./images/upload.png" alt="" srcset="">
<img src="./images/more.png" alt="" srcset="">
<img src="./images/notification.png" alt="" srcset="">
<img src="./images/nilava.jpeg" class="user-icon" alt="" srcset="">
</div>
</nav>
<div class="container play-container">
<div class="row">
<div class="play-video">
<video controls autoplay>
<source src="./images/thumbnail1 video.mp4" type="video/mp4">
</video>
<div class="tags">
<a href="">#Entreprenuers</a> <a href="">#billionaires</a> <a href="">#RatanTata</a> <a
href="">#India</a>
</div>
<h3> Surprisingly a good singer</h3>
<div class="play-video-info">
<p>18,406,599 Views • May 20, 2015</p>
<div>
<a href="http://"><img src="./images/like.png">488K</a>
<a href="http://"><img src="./images/dislike.png">5.9K</a>
<a href="http://"><img src="./images/share.png">SHARE</a>
<a href="http://"><img src="./images/save.png">SAVE</a>
</div>
</div>
<hr>
<div class="owner">
<img src="./images/thumbnail1-owner.jpg">
<div>
<p>megan summers</p>
<span>19.4K subscribers</span>
</div>
<button type="button">Subscribe</button>
</div>
<div class="vid-des">
<p>Dude at my school turns out to have a voice.</p>
<p>Subscribe to megan summers</p>
<hr>
<div class="cmnt">
<h4>16,303 Commnets</h4>
<img src="./images/menu.png" alt="" srcset="">
<span>SORT BY</span>
</div>
<div class="add-cmnt">
<img src="./images/nilava.jpeg" alt="" srcset="">
<input type="text" placeholder="Add a Public Comment">
</div>
<div class="old-cmnt">
<img src="./images/Harpreet.jpg" alt="" srcset="">
<div>
<h3>
Atinder Kumar <span>2 Day ago</span>
</h3>
<p>Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he <br> talks about him. Ratan Tata is a gem .</p>
<div class="cmnt-react">
<img src="./images/like.png" alt="" srcset="">
<span>1.2K</span>
<img src="./images/dislike.png" alt="" srcset="">
<span></span>
<span>REPLY</span>
<!-- <a href="http://">ALL Replies</a> -->
<div> • View 9 Replies</div>
</div>
</div>
</div>
<div class="old-cmnt">
<img src="./images/Harpreet.jpg" alt="" srcset="">
<div>
<h3>
Atinder Kumar <span>2 Day ago</span>
</h3>
<p>Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he <br> talks about him. Ratan Tata is a gem .</p>
<div class="cmnt-react">
<img src="./images/like.png" alt="" srcset="">
<span>1.2K</span>
<img src="./images/dislike.png" alt="" srcset="">
<span></span>
<span>REPLY</span>
<!-- <a href="http://">ALL Replies</a> -->
<div> • View 9 Replies</div>
</div>
</div>
</div>
<div class="old-cmnt">
<img src="./images/Harpreet.jpg" alt="" srcset="">
<div>
<h3>
Atinder Kumar <span>2 Day ago</span>
</h3>
<p>Look at elon’s expression and body language at the mention of Ratan Tata and the self
correction he does when he <br> talks about him. Ratan Tata is a gem .</p>
<div class="cmnt-react">
<img src="./images/like.png" alt="" srcset="">
<span>1.2K</span>
<img src="./images/dislike.png" alt="" srcset="">
<span></span>
<span>REPLY</span>
<!-- <a href="http://">ALL Replies</a> -->
<div> • View 9 Replies</div>
</div>
</div>
</div>
</div>
<hr class="hide-hr">
</div>
<div class="right-sidebar">
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail19.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail10.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail11.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="video-12.html" class="small-thumbnail"> <img src="./images/thumbnail12.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="video-12.html">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail13.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail14.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail15.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail16.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail17.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
<div class="side-video-list">
<a href="" class="small-thumbnail"> <img src="./images/thumbnail18.png" alt="" srcset=""></a>
<div class="vid-info">
<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>
<p>Avalin Vines</p>
<p>1.1M Views</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
side-bar.js
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");
}
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;
}
}
Running the Project:
- Open the
index.htmlfile in a web browser. - You should see a basic YouTube-like layout with a header, a search bar, and a sample video thumbnail.
Additional Enhancements:
To make your clone more functional, consider the following:
- Video Playback: Embed actual video players for the videos.
- Search Functionality: Integrate with a video search API.
- User Authentication: Add login and signup functionality.
- Responsive Design: Use media queries to make the design responsive.
- More Detailed Video Info: Add descriptions, comments, likes, and more.
This guide provides a foundational setup for a YouTube clone using basic web technologies. You can expand upon it with more advanced features and integrations to create a more robust application.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.