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