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.html
file 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.
Reviews
There are no reviews yet. Be the first one to write one.