How to create youtube clone. Youtube clone with HTML, CSS, JS.

Posted on

Hello, welcome. Today we’ll see, how we can easily create a youtube clone using HTML, CSS and JS only. No other library. We’ll also use youtube API to fetch real data from youtube.

Our clone has a lot of features. like, It’s look like youtube. All the video data is coming from youtube directly. We have working search bar also which redirects user to official youtube search page. And whenever user click on video card, he/she will be redirect to youtube’s official video page.

To see demo or you want full coding tutorial video. You can watch the tutorial below.



Video Tutorial

So, without wasting more time let’s see how to code this.



Code

Download Project Images, Download Source Code

First, for this project we have 3 files index.html, style.css and app.js. Well we use very basic CSS so i’ll not be explaining you each CSS property. But, if you have any doubt feel free to ask me in comments. We’ll understand each line of JavaScript.

First let’s create Navbar. Our Navbar HTML structure.

<nav class="navbar">
    <div class="toggle-btn">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <img src="img/logo.PNG" class="logo" alt="">
    <div class="search-box">
        <input type="text" class="search-bar" placeholder="search">
        <button class="search-btn"><img src="img/search.PNG" alt=""></button>
    </div>
    <div class="user-options">
        <img src="img/video.PNG" class="icon" alt="">
        <img src="img/grid.PNG" class="icon" alt="">
        <img src="img/bell.PNG" class="icon" alt="">
        <div class="user-dp">
            <img src="img/profile-pic.png" alt="">
        </div>
    </div>
</nav>
Enter fullscreen mode

Exit fullscreen mode

Output
Capture
Now give some CSS to it.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: none;
}

body{
    position: relative;
    background: #f0f0f0;
    font-family: 'roboto', sans-serif;
}

.navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 2.5vw;
}

.toggle-btn{
    width: 20px;
    height: 10px;
    position: relative;
    cursor: pointer;
}

.toggle-btn span{
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    background: #979797;
}

.toggle-btn span:nth-child(1){
    top: 0;
}

.toggle-btn span:nth-child(3){
    top: 100%;
}

.logo{
    height: 30px;
    margin: -10px 30px 0;
}

.search-box{
    position: relative;
    max-width: 500px;
    width: 50%;
    height: 35px;
    display: flex;
}

.search-bar{
    width: 85%;
    height: 100%;
    border: 2px solid #dbdbdb;
    padding: 0 20px;
    font-size: 16px;
    text-transform: capitalize;
}

.search-btn{
    width: 15%;
    height: 100%;
    background: #f0f0f0;
    border: 2px solid #dbdbdb;
    padding: 5px 0;
    border-left: none;
}

.search-btn img{
    height: 100%;
}

.user-options{
    height: 35px;
    display: flex;
    margin-left: auto;
    align-items: center;
}

.user-options .icon{
    height: 80%;
    margin-right: 20px;
    cursor: pointer;
}

.user-dp{
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.user-dp img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Enter fullscreen mode

Exit fullscreen mode

Output
Capture-2

Now create Side navbar.

<div class="side-bar">
    <a href="#" class="links active"><img src="img/home.PNG" alt="">home</a>
    <a href="#" class="links"><img src="img/explore.PNG" alt="">explore</a>
    <a href="#" class="links"><img src="img/subscription.PNG" alt="">subscription</a>
    <hr class="seperator">
    <a href="#" class="links"><img src="img/library.PNG" alt="">library</a>
    <a href="#" class="links"><img src="img/history.PNG" alt="">history</a>
    <a href="#" class="links"><img src="img/your-video.PNG" alt="">your video</a>
    <a href="#" class="links"><img src="img/watch-later.PNG" alt="">watch leater</a>
    <a href="#" class="links"><img src="img/liked video.PNG" alt="">like video</a>
    <a href="#" class="links"><img src="img/show more.PNG" alt="">show more</a>
</div>
Enter fullscreen mode

Exit fullscreen mode

CSS

.side-bar{
    position: fixed;
    top: 60px;
    left: 0;
    min-width: 250px;
    width: 250px;
    height: calc(100vh - 60px);
    background: #fff;
    padding-right: 10px;
}

.links{
    display: block;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    color: #242424;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.links img{
    height: 25px;
    margin-right: 20px;
}

.links:hover,
.links.active{
    background: rgba(0, 0, 0, 0.1);
}

.seperator{
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}
Enter fullscreen mode

Exit fullscreen mode

Output
Capture-3

Now, Filters options

<div class="filters">
    <button class="filter-options active">all</button>
    <button class="filter-options">CSS</button>
    <button class="filter-options">web development</button>
    <button class="filter-options">python</button>
    <button class="filter-options">entertainment</button>
    <button class="filter-options">marvel</button>
    <button class="filter-options">javascript</button>
    <button class="filter-options">artificial intelligence</button>
    <button class="filter-options">machine learning</button>
    <button class="filter-options">trending</button>
</div>
Enter fullscreen mode

Exit fullscreen mode

CSS

.filters{
position: fixed;
left: 250px;
top: 60px;
width: calc(100% - 250px);
height: 60px;
background: #fff;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
padding: 0 20px;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
}

.filters::-webkit-scrollbar{
display: none;
}

.filter-options{
flex: 0 0 auto;
padding: 10px 20px;
border-radius: 50px;
background: #f0f0f0;
border: 1px solid #dbdbdb;
text-transform: capitalize;
margin-right: 10px;
color: #242424;
font-size: 15px;
cursor: pointer

Incoming search terms:

  • Youtube Clone html

Leave a Reply

Your email address will not be published.