How to Create YouTube Clone Using HTML, CSS and JavaScript

youtube clone piyush608

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   &bull;</p></a>
              <a href="#"><img src="./images/simon.png"><p>simon </p></a>
              <a href="#"><img src="./images/tom.png"><p>Tom  &bull;</p></a>
              <a href="#"><img src="./images/megan.png"><p>Megan Fox  &bull;</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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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 &bull; 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> &bull; 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> &bull; 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> &bull; 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;
    }

}




 

download

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.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.


0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%