How to Create YouTube Clone Using HTML, CSS and JavaScript

By Piyush Gupta

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>

<head>

<title>Youtube Clone</title>

</head>

<body>

</div>

</div>

</div>

</div>

</nav>

<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>

<hr>

</div>

<h3>SUBSCRIPTIONS</h3>

<a href="#"><img src="./images/simon.png"><p>simon </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>

<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>

<a href="video-2.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>2k Views • 2 days</p>

</div>

<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>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<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>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<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>

<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>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

<a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, nobis?</a>

<p>Avalin</p>

<p>2k Views • 2 days</p>

</div>

</body>

</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>  <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>  <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>

<!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>

<head>

<title>Video 9| Elon musk and TATA</title>

</head>

<body>

</div>

</div>

</div>

</div>

</nav>

</video>

<a href="">#Entreprenuers</a> <a href="">#billionaires</a> <a href="">#RatanTata</a> <a

href="">#India</a>

</div>

<h3> Surprisingly a good singer</h3>

<p>18,406,599 Views • May 20, 2015</p>

<div>

<a href="http://"><img src="./images/share.png">SHARE</a>

</div>

<hr>

<div>

<p>megan summers</p>

<span>19.4K subscribers</span>

</div>

<button type="button">Subscribe</button>

</div>

<p>Dude at my school turns out to have a voice.</p>

<p>Subscribe to megan summers</p>

<hr>

<h4>16,303 Commnets</h4>

</div>

</div>

<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>

<span>REPLY</span>

<div> • View 9 Replies</div>

</div>

<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>

<span>REPLY</span>

<div> • View 9 Replies</div>

</div>

<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>

<span>REPLY</span>

<div> • View 9 Replies</div>

</div>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<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>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

<a href="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias, nostrum?</a>

<p>Avalin Vines</p>

<p>1.1M Views</p>

</div>

</body>

</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>  <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>  <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>  <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>

<!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");

}

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"); }

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;

}

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;

}

*{ 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; } }

*{
    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.

Er. Piyush Gupta

I am Social enterpreneur, e-marketer and an international level coder. I will support for startup business

Reviews

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

0.0

0 out of 5 stars (based on 0 reviews)

Excellent0%

Very good0%

Average0%

Poor0%

Terrible0%

How to Create YouTube Clone Using HTML, CSS and JavaScript

index.html

video-1.html

side-bar.js

style.css

Running the Project:

Additional Enhancements:

Er. Piyush Gupta

Reviews

Recent Posts

Google Play Store से पैसे कैसे कमाए 2025?

Canva क्या है और Canva से पैसे कैसे कमाए? 2025

How to earn money from cryptocurrency? 2025 complete information

2025 Social Media Holiday Calendar

How to Create Popup Cookies Consent Box in HTML CSS & JavaScript

How to Create Random Color Palette in HTML CSS & JavaScript

100+ Template Collection Pre-Built websites for free

How to Create Pride Month – Celebrate Your Colors email template

How to Create YouTube Clone Using HTML, CSS and JavaScript

index.html

video-1.html

side-bar.js

style.css

Running the Project:

Additional Enhancements:

Er. Piyush Gupta

Follow Me:

Reviews

Recent Posts

Google Play Store से पैसे कैसे कमाए 2025?

Canva क्या है और Canva से पैसे कैसे कमाए? 2025

How to earn money from cryptocurrency? 2025 complete information

2025 Social Media Holiday Calendar

How to Create Popup Cookies Consent Box in HTML CSS & JavaScript

How to Create Random Color Palette in HTML CSS & JavaScript

100+ Template Collection Pre-Built websites for free

How to Create Pride Month – Celebrate Your Colors email template