Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Clone</title>
<script src="https://kit.fontawesome.com/f5e58ab8a1.js" crossorigin="anonymous"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: #fff;
border-bottom: 1px solid #ddd;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
header img {
width: 50px;
}
.left, .center, .right {
display: flex;
align-items: center;
gap: 15px;
}
.mg {
display: flex;
align-items: center;
gap: 5px;
}
input {
font-size: 18px;
width: 400px;
border-radius: 25px;
padding: 6px 12px;
border: 1px solid #ccc;
}
.mp {
width: 30px;
height: 30px;
border: 1px solid;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.right img {
border-radius: 50%;
width: 35px;
}
.ct {
border: 1px solid;
border-radius: 25px;
padding: 5px 10px;
}
sidebar {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 80px;
position: fixed;
top: 0;
left: 0;
height: 100%;
padding-top: 80px;
width: 200px;
background: #fff;
border-right: 1px solid #ddd;
}
a{
color: black;
text-decoration: none;
font-size: 15px;
padding: 8px 10px;
border-radius: 5px;
}
sidebar a:hover {
background-color: #f1f1f1;
}
sidebar h4 {
margin: 10px 0 5px 10px;
font-size: 14px;
color: #555;
}
sidebar hr {
border: none;
border-top: 1px solid #ddd;
margin: 10px 0;
}
.main-content {
margin-left: 220px;
margin-top: 100px;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.video-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.video-card iframe {
width: 100%;
height: 200px;
border: none;
}
.video-info {
padding: 10px;
}
.video-info h3 {
font-size: 16px;
margin-bottom: 5px;
}
.video-info p {
font-size: 14px;
color: #555;
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="left">
<i class="fa-solid fa-bars"></i>
<div class="mg">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAUd3CYawFR6qqXXZPxB-mY79LXPf4tXI_JA&s" alt="logo">
<a href="#">YouTube</a>
</div>
</div>
<div class="center">
<input type="search" placeholder="Search">
<i class="fa-solid fa-magnifying-glass"></i>
<div class="mp">
<i class="fa-solid fa-microphone"></i>
</div>
</div>
<div class="right">
<div class="ct">
<i class="fa-solid fa-plus"></i>
<span>Create</span>
</div>
<i class="fa-regular fa-bell"></i>
<img src="https://yt3.ggpht.com/yti/ANjgQV9fAoJnpH__-LbyZXAK-QqkFJJwbzKSCW7krUYHgZc=s88-c-k-c0x00ffffff-no-rj-mo" alt="profile">
</div>
</header>
<!-- Sidebar -->
<sidebar>
<a href="#"><i class="fa-solid fa-house"></i> Home</a>
<a href="#"><i class="fa-solid fa-fire"></i> Trending</a>
<a href="#"><i class="fa-solid fa-clapperboard"></i> Subscriptions</a>
<a href="#"><i class="fa-solid fa-book"></i> Library</a>
<a href="#"><i class="fa-solid fa-clock-rotate-left"></i> History</a>
<a href="#"><i class="fa-solid fa-clock"></i> Watch Later</a>
<a href="#"><i class="fa-solid fa-thumbs-up"></i> Liked Videos</a>
<hr>
<h4>Explore</h4>
<a href="#"><i class="fa-solid fa-music"></i> Music</a>
<a href="#"><i class="fa-solid fa-gamepad"></i> Gaming</a>
<a href="#"><i class="fa-solid fa-futbol"></i> Sports</a>
<a href="#"><i class="fa-solid fa-newspaper"></i> News</a>
<a href="#"><i class="fa-solid fa-film"></i> Movies</a>
<hr>
<a href="#"><i class="fa-solid fa-gear"></i> Settings</a>
<a href="#"><i class="fa-solid fa-circle-info"></i> Help</a>
</sidebar>
<div class="main-content">
<!-- Video 1 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/1PoJ3d3vZ0I" allowfullscreen></iframe>
<div class="video-info">
<h3>Vaathi Coming</h3>
<p>Master • Sun Pictures</p>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/_Vp-jCG7gno" allowfullscreen></iframe>
<div class="video-info">
<h3>Naa Ready</h3>
<p>LEO • Sony Music South</p>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/3r8lZ8Zz7iY" allowfullscreen></iframe>
<div class="video-info">
<h3>Aalaporaan Tamizhan</h3>
<p>Mersal • Sony Music South</p>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/VerithanamVideoID" allowfullscreen></iframe>
<div class="video-info">
<h3>Verithanam</h3>
<p>Bigil • Sony Music South</p>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/SelfiePullaVideoID" allowfullscreen></iframe>
<div class="video-info">
<h3>Selfie Pulla</h3>
<p>Kaththi • Sun Music</p>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<iframe src="https://www.youtube.com/embed/ThalaivaaSongVideoID" allowfullscreen></iframe>
<div class="video-info">
<h3>Thalaivaa Song</h3>
<p>Thalaivaa • Sony Music South</p>
</div>
</div>
</div>
Header Design
The header is fixed at the top of the page, just like YouTube. It’s divided into three sections:
Left: Menu icon and logo
Center: Search bar, magnifying glass icon, and microphone button
Right: Create button, notification bell, and profile image
I used display: flexto align items horizontally and position: fixed to keep the header visible while scrolling. This makes the site feel professional and easy to navigate.
Sidebar Navigation
On the left side, I added a vertical sidebar with links to Home, Trending, Subscriptions, Library, History, Watch Later, and Liked Videos. I also included an “Explore” section with categories like Music, Gaming, Sports, News, and Movies.
Font Awesome icons give each link a visual touch, and hover effects make the sidebar interactive. The sidebar is also fixed, so it stays in place while browsing videos.
Main Content Grid
The main content area uses CSS Grid to display videos in a responsive layout:
.main-content {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
This ensures that videos adjust automatically to different screen sizes. Each video is inside a .video-card with a thumbnail (iframe)and a short description.
Output
Top comments (0)