10+ CSS YouTube Clone Examples

This post contains a total of 10+ CSS YouTube Clone Examples with Source Code. All these YouTube Clones are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS YouTube Clone Examples

1. Real YouTube Clone Fully Functional

Made by Justin. A fully functional Css YouTube clone with features like home, explore, Subscriptions & Library it also has History , Watch later etc. The clone is made for mobile devices and doesn’t look very good on mobile. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
       
        
    <!-- Icon Libraries -->
    
        <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">


<!--        Google fonts.             -->
  
  <link href='https://fonts.googleapis.com/css?family=Aguafina Script|Akronim|Raleway' rel='stylesheet'>
   <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
    
    <style>
        
    /*.       JAI AIMU 🔥.       */
    
    
body {
    margin:0;
    font-family: 'Source Sans Pro', sans-serif;
    height:auto;
}
:root{
    --gray:#606060;
    --l-gray:#e5e5e6;
    --light:#cbcbcd;
    --font:22px;
    --medium:34px;
    --small:9px;
}
#home{
    color:red;
    font-size:var(--medium);
}
#bottom{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    text-align:center ;
    position:fixed ;
    bottom:0;
    font-size:9px;
    width:100vw;
    height:50px;
    background-color:white;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    border-top:0.1px solid var(--l-gray);
}
#ex{
    color:var(--gray);
    font-size:24px;
}
#b-icon{
    
}
#bottom>div{
    font-size:var(--small);
    
    width:20%;
}
#add{
    font-size:40px;
    color:var(--gray);
}


#subs{
    color:var(--gray);
    font-size:var(--font);
}

#library{
    color:var(--gray);
    font-size:var(--font);
}
#you{
    font-weight:lighter  ;
    font-size:28px;
    color:red;
    width:100px;
    height:25px;
}

#hedr{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    width:96vw;
    padding-left:2vw;
    padding-right:2vw;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-family:Trade Gothic;
    font-weight:bolder ;
    background-color:white;
    position:fixed;
    height:50px;
    top:-1px;
    border-bottom:1px solid var(--l-gray);
    z-index:9999999;
}
#full-code{
    display:none;;
}
#notifs{
    }
.three{
    margin-left:7px;
   margin-right:7px;
   color:var(--gray);
    font-size:10px;
 width:27px;
 height:27px;border-radius:50%;
}
#roll{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x:scroll ;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    height:45px;
    margin-top:50px;
    padding-top:1vh;
    padding-bottom:1vh;
    background:white;
    box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}
#roll>div{
    width:auto ;
    margin-right:3vw;
    text-align:center ;
    border-radius:50px;
    background:#e5e5e6;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:10px;
    padding-right:10px;
    border:1px solid #AAABAD;
}
#shorts{
    width:100px;
    height:50px;
    margin-top:-1vh;
    margin-right:0vw
}
.vid_img>img{
    width:100vw;
}
.pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:2px;
}
.vid_channel>img{
    width:45px;
    height:45px;
    margin-left:2vw;
    border-radius:50%;
}
.vid_des{
    margin-left:2vw;
}
.vid_title{
    font-weight:bolder ;
    font-size:14px;
    width:calc(90vw - 50px);
}
.more{
     position:absolute ;
     right:2vw;
    float:right ;
    color:var(--gray);
    z-index:-7;
    
}
.vid_views{
    color:var(--gray);
    font-size:12px;
    margin-top:5px;
}


/* Trending tab */

.types img{
    width:100vw;
}
.types{
    padding-top:2vh;
    background-color:#e5e5e6;
    
}
.trend_video img{
    width:100vw;
}
.trend_pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.trend_pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:2px;
}
.trend_vid_channel img{
    width:45px;
    height:45px;
    margin-left:2vw;
    border-radius:50%;
}
.trend_vid_des{
    margin-left:2vw;
}
.trend_vid_title{
    font-weight:bolder ;
    font-size:14px;
    width:calc(90vw - 50px);
}
.more{
     position:absolute ;
     right:2vw;
    float:right ;
    color:var(--gray);
    z-index:-7;
    
}
.trend_vid_views{
    color:var(--gray);
    font-size:12px;
    margin-top:5px;
}
#trending_tab{
    display:none;
    position:relative ;
}
@Keyframes show{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


#create{
    width:100vw;
    height:auto;
    background-color:var(--l-gray);
    position:fixed;
     bottom:-140vh;
z-index:999;
    border-radius:30px 30px 0 0;
}
.icon3{
    margin-top:5%;
    margin-left:5%;
    
}
.ads{
    width:100vw;
}
#upload{
    font-size:25px;
    padding:15px;
    background:var(--light);
    border-radius:50%;
    margin-right:3vw;
    
}
.cr-hd{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    font-size:var(--font);
    width:90vw;
    margin-left:5vw;
    margin-top:6%;
}
.upload{
    font-size:18px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
}
@-webkit-keyframes up{
    0%{
        bottom:-110vh;
    }
    100%{
        bottom:0px;
    }
}
@keyframes up{
    0%{
        bottom:-110vh;
    }
    100%{
        bottom:0px;
    }
}
@-webkit-keyframes down{
    0%{
        bottom:0px;
    }
    100%{
        bottom:-110vh;
    }
}
@keyframes down{
    0%{
        bottom:0px;
    }
    100%{
        bottom:-110vh;
    }
}

#trending_tab{
    margin-top:50px;
}



body {
    margin:0;
    
}

.types img{
    width:100vw;
}
.types{
    padding-top:2vh;
    background-color:#e5e5e6;
    
}
.trend_video img{
    width:100vw;
}
.trend_pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
}
.trend_pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:2px;
}
.trend_vid_channel img{
    width:45px;
    height:45px;
    margin-left:2vw;
    border-radius:50%;
}
.trend_vid_des{
    margin-left:2vw;
}
.trend_vid_title{
    font-weight:bolder ;
    font-size:14px;
    width:calc(90vw - 50px);
}
.more{
     position:absolute ;
     right:2vw;
    float:right ;
    color:var(--gray);
    z-index:-7;
    
}
.trend_vid_views{
    color:var(--gray);
    font-size:12px;
    margin-top:5px;
}
.chanls{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100vw;
    overflow-x:scroll;
    border-bottom:1px solid #e5e5e6;
}
.chanls img{
    width:15vw;
    height:15vw;
    border-radius:50%;
    margin-left:2vw;
    margin-right:2vw;
    margin-top:2vw;
}
.chanls div{
    text-align:center ;
    font-size:10px;
    padding-bottom:1vh;
    color:grey;
}

 .roll{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x:scroll ;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    height:45px;
    
   font-size:13px;
    background:white;
    box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}
.roll>div{
    width:auto ;
    margin-right:3vw;
    text-align:center ;
    border-radius:50px;
    background:#e5e5e6;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:10px;
    padding-right:10px;
    border:1px solid #AAABAD;
}

.see_more{
    position:absolute ;
    right:0vw;
    background-color:white;
    font-weight:bolder;
    width:12vw;

    height:calc(15vw + 28px);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center ;
        -ms-flex-pack:center ;
            justify-content:center ;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    color:blue;
}

.cover{
    width:9vw;
    height:15vw;
    background-color:white;
}


#subs_tab{
    display:none;
    margin-top:50px;
}


.one-vid{
    width:37vw;
    font-size:12px;
    margin-right:3vw;
}
.one-vid img{
    width:37vw;
    height:21vw;
    
}
.his_des{
    color:grey;
    font-size:10px;
}
.aone{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    
    
}
.history_f{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:2vw;

    overflow-x:scroll ;
}
#first-{
    margin-left:2vw;
}

.recent{
    margin-top:2vw;
    margin-left:2vw;
    font-size:17px;
    
}
.category1{
    color:black;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-top:5vw;
    font-size:20px;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    line-height:31px;
}
.category1 i{
    margin-left:7vw;
    margin-right:7vw;
    color:grey;
    font-size:23px;
}
.ade{
      margin-left:7vw;
    margin-right:7vw;
    
    font-size:23px;
}
.doun{
    margin-top:5vw;
    margin-bottom:5vw;
}


.play-list{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:96vw;
    margin-left:2vw;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
}

.played i{
    font-weight:bolder ;
}
.number{
    font-size:12px;
    line-height:12px;
}
.category1 span{
    display:block;
  
}
.num-txt{
    font-size:17px;
}

#library-tab{
    display:none;
    margin-top:60px;
    margin-bottom:60px;
}


.hedar{
    width:100vw;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:50px;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    box-shadow:0px 2px 2px rgba(0,0,0,0.3);
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    background-color:white;
    z-index:9;
}
.go_back{
    margin-left:4vw;
    margin-right:4vw;
   font-size:22px;
}
.hedar div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-size:18px;
}
.history_m{
    margin-left:5vw;
    font-size:22px;
    margin-right:4vw;
}

.sarch{
    font-size:22px;
}
#his_section img{
    width:100vw;
    margin-bottom:50px;
}

.searche input{
    background:transparent ;
    border:none;
  height:50px;
    width:calc(100vw - 20px);
    font-size:16px;
}


.searche{
    width:100vw;
    background:#e5e5e6;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    height:50px;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
    overflow:hidden ;
}
.searche ion-icon{
    margin-left:4vw;
    margin-right:4vw;
    font-size:20px;
    z-index:2;
}
.searche input:hover{
    border:none;
}
.Today{
    margin-left:4vw;
    font-weight:bolder;
}



#his_section{
    display:none;
}

#down_section{
    display:none;
}
.hedar{
    width:100vw;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:50px;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    box-shadow:0px 2px 2px rgba(0,0,0,0.3);
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    background-color:white;
    z-index:9;
}
.go_back{
    margin-left:4vw;
    margin-right:4vw;
   font-size:22px;
}
.hedar div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-size:18px;
}
.history_m{
    margin-left:5vw;
    font-size:22px;
    margin-right:4vw;
}

.sarch{
    font-size:22px;
}
#down_section img{
    width:100vw;
    margin-bottom:50px;
    position:relative ;
      top:calc(35vh - 50px);
      height:30vh;
}


.go_back{
    margin-left:4vw;
    margin-right:4vw;
   font-size:22px;
}
.hedar div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-size:18px;
}
.history_m{
    margin-left:5vw;
    font-size:22px;
    margin-right:4vw;
}

.sarch{
    font-size:22px;
}
#Your-videos img{
    width:100vw;
    margin-bottom:50px;
    position:relative ;
      top:calc(30vh - 50px);
      height:30vh;
      
}

.cap{
    width:100vw;
    text-align:center ;
    margin-top:10vh;
}
.v-up{
    width:30vw;
    background:#0099ff;
    color:black;
    padding-top:2vh;
    padding-bottom:2vh;
    margin-left:calc(50vw - 15vw);
    text-align:center ;
    margin-top:2vh;
    border-radius:3px;
    
}
.v-up:active{
    box-shadow:2px 2px 0px #0066ff;
}
#Your-videos{
    display:none;
}

.go_back{
    margin-left:4vw;
    margin-right:4vw;
   font-size:22px;
}
.hedar div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-size:18px;
}
.history_m{
    margin-left:5vw;
    font-size:22px;
    margin-right:4vw;
}

.sarch{
    font-size:22px;
}
#liked_section img{
    width:100vw;
    
    position:relative ;
      
      
}
#liked_section{
    margin-bottom:60px;
    display:none;
}
#later_section{
    display:none;
}

.later{
    width:100vw;
    text-align:center ;
    margin-top:calc(50vh - 50px);
}

#movie_section{
    display:none;
}


#page iframe{
    width:100vw;
    border:none;
    height:40vh;
}
.strip{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100vw;

    color:grey;
    -ms-flex-pack:distribute;
        justify-content:space-around;
}
.strip div{
    text-align:center ;
    font-size:10px;
}
.strip_icon, #strip_i{
    font-size:25px;
    line-height:20px;
}
#strip_i{
    line-height:30px;
    font-size:25px;
}
.video_title{
    font-weight:bolder ;
    margin:3vw;
    font-size:18px;
}
#strip_io{
    line-height:30px;
    font-size:28px;
}
.reviews{
    margin-left:3vw;
    margin-top:1vh;
    margin-bottom:2vh;
    font-size:12px;
    color:#606060;
}


.video_channel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
}
.video_channel img{
    margin-left:4vw;
    height:40px;
    border-radius:50%;
    margin-right:4vw;
    width:40px;
}
.chanl_name{
    font-size:17px;
    color:black;
}
.join{
    margin-top:5px;
    color:red;
    font-size:14px;
    font-weight:bolder ;
}
.bell{
    position:absolute ;
    right:5vw;
    color:grey;
    font-size:25px;
}
.autoplay-pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    width:95vw;
    margin-left:2.5vw;
}

.onoffswitch {
    position: relative; 
    width: 47px;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
    
}
.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onoffswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    height: 20px; 
    padding: 0; 
    line-height: 20px;
    border: 0px solid #FFFFFF; 
    border-radius: 30px;
    background-color: #9E9E9E;
}
.onoffswitch-label:before {
    content: "";
    display: block; 
    width: 30px; 
    margin: -5px;
    background: #FFFFFF;
    position: absolute; 
    top: 0; 
    bottom: 0;
    right: 23px;
    border-radius: 30px;
    box-shadow: 0 6px 12px 0px #757575;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #42A5F5;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #42A5F5;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
    background-color: #2196F3; 
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}
.autoplay{
    font-weight:bolder ;
    color:grey;
}
.no{
    display:inline-block ;
}
.noo{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-weight:bolder ;
    color:grey;
}

.vid_img2>img{
    width:90vw;
}
.pannel2{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:90vw;
    margin-top:2px;
}
.vid_channel2>img{
    width:45px;
    height:45px;
    margin-left:2vw;
    border-radius:50%;
}
.vid_des2{
    margin-left:2vw;
}
.vid_title2{
    font-weight:bolder ;
    font-size:14px;
    width:calc(80vw - 50px);
}
.more2{
     position:absolute ;
     right:5vw;
    float:right ;
    color:var(--gray);
    z-index:-7;
    
}
.vid_views2{
    color:var(--gray);
    font-size:12px;
    margin-top:5px;
}

#video3{
    margin-left:4.5vw;
}
.com-pannel{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    width:95vw;
    margin-left:2.5vw;

}
.arrow{
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
    
}

.admi img{
    width:30px;
    height:30px;
    margin-left:4vw;
    margin-right:3vw;
    border-radius:50%;
}
.admi{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    font-size:13px;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    margin-top:1vh;
}

.strip div:hover{
    color:red;
}

#main-video{
    height:40vh;
    
}
.cont{
    position:-webkit-sticky;
    position:sticky;
    top:-1px;
    z-index:999;
    background:black;
    height:40vh
}

.video-d{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
}
.video-d div i{
    font-weight:bolder ;
    margin-right:5vw;
    font-size:22px;
}
 
 #page{
     display:none;
     top:0vh;
     position:absolute ;
 }

#cls{
    position:fixed;
    top:0;
    left:0;
    padding-top:3vh;
    padding-left:3vh;
    padding-bottom:6vh;
    padding-right:6vh;
    font-weight:bolder;
    color:white;
    font-size:20px;
    z-index:9999999;
}

@-webkit-keyframes slide1{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@keyframes slide1{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.cls_txt{
    width:100vw;
    text-align:center ;
    color:grey;
    font-size:19px;
    font-weight:bolder ;
    margin-bottom:4vh;
}
.cls_txt i{
    font-weight:bolder ;
}
#tr_page{
    display:none;
}
#tr_page iframe{
    height:40vh;
    width:100vw;
    border:none;
}


#sub_page iframe{
    width:100vw;
    border:none;
    height:40vh;
}

#sub_page{
    display:none;
}

#notif_section{
    display:none;
    
}
#notif_section img{
    width:100vw;

    position:relative ;
      
      
}

.user_cont{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    line-height:24px;
}
.user_cont div img{
    width:10vw;
    height:10vw;
    margin-left:4vw;
    margin-right:4vw;
    border-radius:50%;
}
.nam{
    font-weight:bolder;
    font-size:18px;
    
}
.email{
    
}

.ac_hedr{
    width:100vw;
    height:50px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    box-shadow:0px 2px 2px rgba(0,0,0,0.3);
    font-size:20px;
    line-height:40px;
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    background-color:white;
}
.ac_hedr ion-icon{
    font-size:34px;
    font-size:lighter ;
    margin-left:2vw;
    margin-right:4vw;
}
.manage{
    color:#0088ff;
}
.long_icons{
    margin-top:4vh;
}
.long_icons div{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    font-size:18px;
    margin-bottom:4vh;
    line-height:18px;
}
.long_icons div i{
    font-weight:light;
    font-size:22px;
    margin-right:4vw;
    margin-left:6vw;
}
.long_icons div ion-icon{
    font-weight:light;
    font-size:24px;
    margin-right:4vw;
    margin-left:6vw;
    z-index:-7;
}
.long_icons hr{
    margin-bottom:3vh;
}

.policy{
    font-weight:bolder ;
    color:grey;
    font-size:12px;
    width:100vw;
    text-align:center ;
    margin-bottom:1vh;
}

#profile{
   display:none;
}

.upper_h{
    width:100vw;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    height:50px;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    background-color:white;
    box-shadow:0px 2px 2px rgba(0,0,0,0.24);
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    z-index:8;
}
.upper_h input{
    height:30px;
    width:calc(90vw - 60px);
    border:none;
    opacity:0.6;
    background-color:#cbcbcd;
}
.upper_h ion-icon{
    font-size:28px;
    margin-left:2vw;
    margin-right:2vw;
}
.search_his i{
    font-size:23px;
    margin-left:4vw;
    margin-right:4vw;
    line-height:10px;
}
.search_his{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    margin-top:6px;
    font-size:17px;
    color:#666;
}
.search_his div ion-icon{
    -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
    font-size:27px;
    margin-right:2vw;
    margin-top:8px;
    z-index:-8;
}

#search_tab{
    display:none;
}


#loader{
    width:100vw;
    height:100vh;
    position:fixed;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center ;
        -ms-flex-pack:center ;
            justify-content:center ;
    -webkit-box-align:center ;
        -ms-flex-align:center ;
            align-items:center ;
    z-index:99999999999;
    background-color:white;
    
}
#loader i{
    color:red;
    font-size:24vh;
    margin-bottom:8vh;
}


        </style>
    </head>
    <body id="body">
    
<!-- ============ Loader =============-->


    <div id="loader">
        <i class="fa fa-youtube-play"></i>
    </div>
    <div id="create_tab">
        <div id="create">
        <div class="cr-hd">
            <div class="cr-text">Create</div>
            <div class="close" onclick="close_create()">
        <ion-icon name="close-outline"></ion-icon>
            </div>
        </div>
        <div class="icon3">
                <div class="upload">
                    <i class="fa fa-upload" id="upload"></i> Upload a video
                    
                </div>
                <br>
                 <div class="upload">
                  <ion-icon name="camera-outline" id="upload"></ion-icon> Create a short
                    
                </div>
                <br>
                 <div class="upload">
                    <ion-icon name="radio-outline" id="upload"></ion-icon> Go Live
                    
                </div>
            </div>
            <br>
        </div>

    </div>
    
    
<!-- ########## Profile #############-->


    <div id="profile">
        <div class="ac_hedr">
    
              <ion-icon name="close" onclick="close_profile()"></ion-icon>
              
              Account
        </div>
        <br>
            <div class="user_cont"> 
            <div>
                <img src="https://dl.dropbox.com/s/9ajxj4plt1uqzjb/images%20%2829%29.jpeg?dl=0">
            </div>
            
            <div>
                <span class="nam">Justin</span>
                <br>
                <span class="email">
                    [email protected]
                </span>
                <br>
                <span class="manage">
                    Manage your Google account
                </span>
            </div>
            
          
            </div>
            
              <hr width="99.5%" color="#e5e5e6">
              <div class="long_icons">
            <div>
            <ion-icon name="person-sharp"></ion-icon>

                 Your Accout
                 </div>
                 <div>
                     <ion-icon name="tv-outline"></ion-icon>
                     Youtube Studio
                 </div>
                 <div>
                     <ion-icon name="bar-chart-outline"></ion-icon>
                     Time watched
                 </div>
                 <div>
                     <ion-icon name="logo-youtube"></ion-icon>
                     Get Youtube Premium
                 </div>
                 <div>
                     <ion-icon name="cash-outline"></ion-icon>
                     Purchase and Memberships
                 </div>
                 <div>
                     <ion-icon name="copy-sharp"></ion-icon>
                     Switch Account
                 </div>
                 <div>
                     <ion-icon name="eye-off-outline"></ion-icon>
                     Turn on incognito
                 </div>
                  <hr width="99.5%" color="#e5e5e6">
                  <div>
                  <ion-icon name="settings-outline"></ion-icon>
                  Settings
                  </div>
                  <div>
                      <ion-icon name="help-circle-outline"></ion-icon>
                      Help and Feedback
                  </div>
              </div>
              <div class="policy">Privacy Policy • Terms of service</div>
        </div>
        
 <!---
 
 ×××××××× Profile section ends ×××××××
 
 -->
 
 <!-- 
 
 ∆∆∆∆∆∆∆ Header section starts ∆∆∆∆∆∆∆
 
 -->
     <div id="notif_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back1" onclick="close_notif()"></ion-icon>
        Notification
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
            </div>
          <img src="https://dl.dropbox.com/s/0xmvczz9fvtiq7c/_20201029_104154.JPG?dl=0">
          <img src="https://dl.dropbox.com/s/tbdy1oef7lhed8l/_20201029_110749.JPG?dl=0">
          <br><br><br><br>
        </div>
               <div id="search_tab">
            <div class="upper_h">
                <ion-icon name="arrow-back-outline" id="bake" onclick="close_search()"></ion-icon>
                <input type="text" placeholder=" Search Youtube">
                <ion-icon name="mic-outline"></ion-icon>
            </div>
            <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  What If
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Coding Dragone analogue clocke
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
                   </div>
                          <div class="search_his">
            <div>
                   <i class="fa fa-history"></i> Flexbox
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  CSS Grid
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  The Shining
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
                   </div>
                   
                          <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Kurzgesagt Mars base
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Coding Train
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Melodysheep
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  How to play chess
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Js & CSS
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  How to kill boredom
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Corona sports
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  The Infographics Show
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  10 best apps to clone 
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  What if you were dead
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  How to use a mobile
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
            
                   <div class="search_his">
            <div>
                   <i class="fa fa-history"></i>  Kurzgesagt
                   </div>
                   <div>
                       <ion-icon name="arrow-back-outline"></ion-icon>
                   </div>
            </div>
        </div>
        
    <div id="full-code">
        
    <div id="hedr">
       <div >
        <img id="you"src="https://dl.dropbox.com/s/bq94nnb5zl3f6os/images%20%282%29.png?dl=0">
           </div>
             <div >
               <ion-icon name="notifications" id="notifs" class="three" onclick="notifications()"> 
                 </ion-icon>
                   <ion-icon name="search" class="three" onclick="open_search()"> 
                   </ion-icon>
                     <img src="https://dl.dropbox.com/s/9ajxj4plt1uqzjb/images%20%2829%29.jpeg?dl=0" class="three" onclick="open_profile()">
      </div>
    </div>
    

<!-- 

========= Subscriptions tab =============

-->
     <div id="subs_tab">
    
    <div class="chanls">
    <div>
        <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0">
        Bright Side
        </div>
        <div>
        <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0">
        <br>
        Online Tu...
        </div>
        <div>
        <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0">
        <br>
        Melodysh...
        </div>
        <div>
        <img src="https://dl.dropbox.com/s/kbsytwj5yve2172/download.png?dl=0">
        <br>
        Game Roo...
        </div>
        <div>
        <img src="https://dl.dropbox.com/s/p3keqkbe0n3sdyz/images%20%286%29.jpeg?dl=0">
        <br>
        Haunting...
        </div>
        <div>
        <img src="https://dl.dropbox.com/s/604rvjcnzxrf8tl/images%20%282%29.jpeg?dl=0">
        <br>
        Kurzgesagt
        </div>
        <div>
            <img src="https://dl.dropbox.com/s/pfwsejfc01ip4zm/images%20%282%29.jpeg?dl=0">
            <br>
            Coding Dragon 
        </div>
        <div>
            <img src="https://dl.dropbox.com/s/dannmr8wnl2rsd4/images%20%282%29.jpeg?dl=0">
            <br>
            Smart Ba...
        </div>
        <div>
            <img src="https://dl.dropbox.com/s/oodj6wl0rnvzurg/images%20%284%29.jpeg?dl=0">
            <br>
            Infographics...
        </div>
        <div>
            <img src="https://dl.dropbox.com/s/opga2ht01gwwwni/images%20%283%29.jpeg?dl=0">
            <br>
            Ghost Series 
        </div>
        <div style="padding-right:10vw">
        <img src="https://dl.dropbox.com/s/o5gcpb5vgp3atje/images%20%282%29.png?dl=0">
        <br> DIY Tyler
        </div>
  
    
       <div class="see_more" style="color:blue;font-size:15px">
           All
       </div>
        </div>
        
    
        
         <div class="roll">
    &nbsp; &nbsp; &nbsp;
        <div style="background:#AAABAD;margin-right:3vw">All&nbsp;Videos</div>
        <div>Today</div>
        <div>Continue&nbsp;Watching</div>
        <div>Unwatched</div>
        <div>Live</div>
        <div>Posts</div>
        <div>Latest&nbsp;Uploaded</div>
        <div>Latest&nbsp;Unwatched</div>
        <div>Yesterday</div>
        <div>Shorts</div>
        &nbsp; &nbsp;
    </div>
    
        <div class="trend_video" id="t_video_1" onclick="indian_island()"> 
        <img src="https://dl.dropbox.com/s/tbbkm7lzjq7ql07/_20201027_080316.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> 
                <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">Indian Island hides something You're not supposed to see</div>
                    <div class="trend_vid_views">Bright Side • 248k Views • 1 day ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="asteroid_mining()"> 
        <img src="https://dl.dropbox.com/s/9j7009n5h13tyth/_20201027_101539.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> 
                <img src="https://dl.dropbox.com/s/604rvjcnzxrf8tl/images%20%282%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title"> Unlimited Resources from Space - Asteroid Mining</div>
                    <div class="trend_vid_views">Kurzgesagt - In a nutshell • 33M views • 1 day ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="black_magic()">
         <img src="https://dl.dropbox.com/s/86gpwyz5ua7871x/_20201027_102424.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel">
                    
                <img src="https://dl.dropbox.com/s/p3keqkbe0n3sdyz/images%20%286%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">Indonesian Black Magic Explained | Late Night Show</div>
                    <div class="trend_vid_views">Haunting Tube• 9M Views • 2 day ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="discoveries()"> <img src="https://dl.dropbox.com/s/2dqniv4186zlrfk/_20201027_080404.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title"> 11 Discoveries nearly stopped Diver's hearts </div>
                    <div class="trend_vid_views">Bright Side • 4M Views • 2 days ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="audio_player()"> <img src="https://dl.dropbox.com/s/zu0trfqyf9t8szm/_20201027_080342.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">HTML & CSS Only Audio player | HTML Audio  </div>
                    <div class="trend_vid_views">Online Tutorials • 5.7M Views • 3 days ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
            <br> </div>
            
            <br><br>
            
   
    </div>
    
    
    
    
    
    <!--- 
    
=========== Trending Tab ==============

    --->
    
    
     <div id="trending_tab">
        <div class="types"> <img src="https://dl.dropbox.com/s/9zo7xfp7rk5if5r/_20201025_114155.JPG?dl=0"> </div>
        <div class="trend_video" id="t_video_1" onclick="entire_future2()"> <img src="https://dl.dropbox.com/s/t1956zc02abf8vu/_20201025_114937.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">TIMELAPSE OF THE ENTIRE UNIVERSE : A Journey to the start of time (4k)</div>
                    <div class="trend_vid_views">MelodySheep • 48M Views • 1 year ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="t_series()"> <img src="https://dl.dropbox.com/s/kb801ckae287r1a/_20201025_121209.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/altj8pn04migwsp/images%20%281%29.png?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">Nach Meri Rani : Guru Randhawa Feat. Nora Fatehi | Tanishk Bagchi | Nikhita Gu...</div>
                    <div class="trend_vid_views">T Series • 1M views • 1 day ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="light()"> <img src="https://dl.dropbox.com/s/eef2sfexrg6slxb/_20201025_153705.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">CSS Tubelight Animation Glowing Effect | Text Animation Effects </div>
                    <div class="trend_vid_views">Online Tutorials • 4M Views • 5 days ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="clock()"> <img src="https://dl.dropbox.com/s/zs19u16xvgd8e0a/_20201028_225927.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/pfwsejfc01ip4zm/images%20%282%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">Dark Analog Clock UI HTML Tutorial</div>
                    <div class="trend_vid_views">Coding Dragon • 1.2k Views • 5 months ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
        </div>
        <br>
        <div class="trend_video" id="t_video2" onclick="top_20()"> <img src="https://dl.dropbox.com/s/ofpmp3yu2nyyf7f/_20201025_153635.JPG?dl=0">
            <div class="trend_pannel">
                <div class="trend_vid_channel"> <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0"> </div>
                <div class="trend_vid_des">
                    <div class="trend_vid_title">Top 20 CSS and Js effects of July 2020 </div>
                    <div class="trend_vid_views">Online Tutorials • 5M Views • 3 months ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
            </div>
            <br> <br><br></div>
    </div>
      
      <div id="library-tab">
        <div class="recent">Recent</div>
            <div class="history_f">
                <div class="one-vid" id="first-">
                    <img src="https://dl.dropbox.com/s/79veh8i27zzgl9a/_20201027_150955.JPG?dl=0" >
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    Unlimited Resources From...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        Kurzgesagt - In a Nutshell
                    </div>
                </div>
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/f3gwwyjsa4tpr6a/_20201027_150929.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    What if there was a Mega Earthquake...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        What If
                    </div>
                </div>
                
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/71xi52ilv75tjh4/_20201027_193319.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    HTML & CSS Audio Player | HTML Au...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        Online Tutorials
                    </div>
                </div>
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/joj73q592mdsoj4/_20201027_193247.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    Matter VS Anti Matter - What if Discussed
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        What If
                    </div>
                </div>
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/awnzifwwfcejh1z/_20201027_204316.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    GeoEngineering : A horrible Idea We...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        Kurzgesagt - In a Nutshell
                    </div>
                </div>
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/qvo41et3a05uk22/_20201027_204240.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                    The Rental | Ending Explained in Hindi
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        Haunting Tube
                    </div>
            
                </div>
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/nfssqwmc3r7vbn3/_20201027_212817.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                British Intelligence Cam...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        The Infographics Show
                    </div>
                </div>
                
                 <div class="one-vid">
                    <img src="https://dl.dropbox.com/s/npa5o7yco8edsky/_20201027_212750.JPG?dl=0">
                    <br>
                    <div class="aone"> 
                    <div class="his_title">
                50+ Survival Skills that might save your life...
                    </div>
                    <div>
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                    </div>
                    </div>
                    <div class="his_des">
                        Bright Side
                    </div>
                </div>
        </div>
            
            <hr width="99.5%" color="#e5e5e6" class="doun">
                <div class="category1" onclick="history()">
                    <i class="fa fa-history"></i>
                    <span>History</span>
                </div>
    
                 <div class="category1" onclick="download()">
                    <i class="fa fa-download"></i>
                    <span>Downloads</span>
                </div>
                <div class="category1" onclick="mine()">
                    <i class="fa fa-play-circle"></i>
                    <span>Your Videos</span>
                </div>
        
            <div class="category1" onclick="movies()">
                    <i class="fa fa-film"></i>
                    <span>Your Movies</span>
                </div>
                
                <div class="category1" onclick="watch_l()">
                    <i class="material-icons">schedule</i>
                    <span>Watch Later</span>
                </div>
                <hr width="99.5%" class="doun" color="#e5e5e6">
                <div class="play-list">
                    <div class="play_text">
                        Playlist
                    </div>
                    <div class="played">
                        Recently Played &nbsp; <i class="fa fa-angle-down"></i>
                    </div>
                </div>
                 <div class="category1" style="color:#0099ff">
                    <ion-icon name="add-outline" class="ade"></ion-icon>
                    <span>Add playlist</span>
                </div>
                
                 <div class="category1" onclick="liked()">
                    <i class="material-icons">thumb_up_alt</i>
                    <span class="num-txt">Liked Videos <span class="number">4 videos</span></span>
                </div>
            </div>
            
             <div id="later_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back1" onclick="back6()"></ion-icon>
                Watch later
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
                
            </div>
        <div class="later">You dont have any Watch later Videos</div>
        </div>
        
        
        <!-- #########################################
                PAGE 2
#########################################
-->
        <div id="tr_page">
         <div onclick="close_vid2()">
       <i class="fa fa-angle-left" id="cls"></i>
   </div>
       <div class="cont">
           <iframe src="https://www.youtube.com/embed/uD4izuDMUQA" id="tr-video"></iframe>
           </div>
           <div class="video-d">
           <div class="video_title" id="video_title1">TimeLapse of the entire Future</div>
           <div>
               <i class="fa fa-angle-down"></i>           </div>
           </div>
           
           <div class="reviews" id="viws1">49M views • 1 year</div>
           <div class="strip">
               <div id="likes" ><i class="material-icons" id="strip_i">thumb_up_alt</i>
               <br>
               1.1k
               </div>
               <div id="dislikes">
                <i class="material-icons"  id="strip_i">thumb_down_alt</i>
                <br>
                125
                </div>
                <div id="share">
                    <i class="fa fa-share" id="strip_i"></i>
                    <br> Share
                </div>
                <div id="download">
                    <i class="fa fa-download" id="strip_i"></i>
                    <br>
                    Download
                </div>
                <div id="save">
                    <ion-icon name="duplicate" id="strip_io"></ion-icon>
                    <br>
                    Save
                </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="video_channel">
              <div ><img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0" id="video_chanl1">
              </div>
              <div class="channel_cont">
                  <div class="chanl_name" id="chanl_name1">
                      MelodySheep
                  </div>
                  <div class="join">
                      SUBSCRIBE
                  </div>
              </div>
              <ion-icon name="notifications-outline" class="bell"></ion-icon>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           
           <div class="comments">
               <div class="com-pannel">
                  <div class="count"id="count1">
                  Comments &nbsp;&nbsp;<b>983 </b>
                  </div>
                  <div class="arrow">
                      <ion-icon name="code-outline"></ion-icon>
                  </div>
                  
               </div>
               <div class="admi" id="admi_com1">
                   <img src="https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0">  I feel like I should pay for watching This 🤐
               </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="suggestions">
               <div class="autoplay-pannel">
                   <div class="autoplay">Up Next</div>
                   <div class="noo">
                   Autoplay &nbsp; &nbsp;
                   <div class="no">
                       <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1" tabindex="0" checked>
    <label class="onoffswitch-label" for="myonoffswitch1"></label>
</div>
                   </div>
               </div>
           </div>
        </div>
          <br>
           <div  id="video3" onclick="entire_future1()"> 
           <div class="vid_img2">
           <img src="https://dl.dropbox.com/s/t1956zc02abf8vu/_20201025_114937.JPG?dl=0" > </div>
            <div class="pannel2">
                <div class="vid_channel2"> <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0"> </div>
                <div class="vid_des2">
                    <div class="vid_title2">TIMELAPSE OF THE ENTIRE UNIVERSE : A Journey to the end of time (4k)</div>
                    <div class="vid_views2">MelodySheep • 48M Views • 1 year ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
            </div>
        </div>
        <br>
    <div id="video3" onclick="terror_crocs1()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/n20kezfd5lu4pnr/_20201024_131311.JPG?dl=0">
        </div>
        <div class="pannel2">
        <div class="vid_channel2">
            <img src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0">
            </div>
            
            <div class="vid_des2">
                <div class="vid_title2">What If Terror Crocs were still alive and not extinct?</div>
                
                <div class="vid_views2">What If • 7.3k Views • 3 days  ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
        </div>
        <br>
    </div>
     <div id="video3" onclick="minecraft1()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/1cswvxjwx2dnge9/_20201025_162937.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">MineCraft 360° VR Roller Coaster Ride Illusions Will bend your Mind
                </div>
                <div class="vid_views2">Bright Side • 13.7k Views • 2 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>

    <div id="video3" onclick="loader_OT1()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/l76i0pwm85byewl/_20201025_100749.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">CSS gradient Shadow Loader Animation Effects | HTML Animation Effects 
                </div>
                <div class="vid_views2">Online Tutorials  • 8.4k Views • 3 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>
    
    
    <div class="cls_txt" onclick="close_vid2()"><i class="fa fa-angle-left"></i> &nbsp; Back</div>
    </div>
    <script>
        var video1=document.getElementById("tr_video");
        var title1=document.getElementById("video_title1");
        var channel1=document.getElementById("video_chanl1");
        var namee1=document.getElementById("chanl_name1");
        var views1=document.getElementById("viws1");
        var comment1=document.getElementById("admi_com1");
        var count1=document.getElementById("count1");
    </script>
    
    <!--
     Video page of Subscriptions  tab
-->
<div id="sub_page">
       <div class="cont">
           <iframe src="https://www.youtube.com/embed/uD4izuDMUQA" id="sub-video"></iframe>
           </div>
           <div class="video-d">
           <div class="video_title" id="video_title2">TimeLapse of the entire Future</div>
           <div>
               <i class="fa fa-angle-down"></i>           </div>
           </div>
           
           <div class="reviews" id="viws2">49M views • 1 year</div>
           <div class="strip">
               <div id="likes" ><i class="material-icons" id="strip_i">thumb_up_alt</i>
               <br>
               1.1k
               </div>
               <div id="dislikes">
                <i class="material-icons"  id="strip_i">thumb_down_alt</i>
                <br>
                125
                </div>
                <div id="share">
                    <i class="fa fa-share" id="strip_i"></i>
                    <br> Share
                </div>
                <div id="download">
                    <i class="fa fa-download" id="strip_i"></i>
                    <br>
                    Download
                </div>
                <div id="save">
                    <ion-icon name="duplicate" id="strip_io"></ion-icon>
                    <br>
                    Save
                </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="video_channel">
              <div ><img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0" id="video_chanl2">
              </div>
              <div class="channel_cont">
                  <div class="chanl_name1" id="chanl_name2">
                      MelodySheep
                  </div>
                  <div class="join">
                      SUBSCRIBE
                  </div>
              </div>
              <ion-icon name="notifications-outline" class="bell"></ion-icon>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           
           <div class="comments">
               <div class="com-pannel">
                  <div class="count"id="count2">
                  Comments &nbsp;&nbsp;<b>983 </b>
                  </div>
                  <div class="arrow">
                      <ion-icon name="code-outline"></ion-icon>
                  </div>
                  
               </div>
               <div class="admi" id="admi_com2">
                   <img src="https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0">  I feel like I should pay for watching This 🤐
               </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="suggestions">
               <div class="autoplay-pannel">
                   <div class="autoplay">Up Next</div>
                   <div class="noo">
                   Autoplay &nbsp; &nbsp;
                   <div class="no">
                       <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2" tabindex="0" checked>
    <label class="onoffswitch-label" for="myonoffswitch2"></label>
</div>
                   </div>
               </div>
           </div>
        </div>
          <br>
           <div  id="video3" onclick="entire_future2a()"> 
           <div class="vid_img2">
           <img src="https://dl.dropbox.com/s/t1956zc02abf8vu/_20201025_114937.JPG?dl=0" > </div>
            <div class="pannel2">
                <div class="vid_channel2"> <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0"> </div>
                <div class="vid_des2">
                    <div class="vid_title2">TIMELAPSE OF THE ENTIRE UNIVERSE : A Journey to the end of time (4k)</div>
                    <div class="vid_views2">MelodySheep • 48M Views • 1 year ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
            </div>
        </div>
        <br>
    <div id="video3" onclick="terror_crocs2()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/n20kezfd5lu4pnr/_20201024_131311.JPG?dl=0">
        </div>
        <div class="pannel2">
        <div class="vid_channel2">
            <img src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0">
            </div>
            
            <div class="vid_des2">
                <div class="vid_title2">What If Terror Crocs were still alive and not extinct?</div>
                
                <div class="vid_views2">What If • 7.3k Views • 3 days  ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
        </div>
        <br>
    </div>
     <div id="video3" onclick="minecraft2()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/1cswvxjwx2dnge9/_20201025_162937.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">MineCraft 360° VR Roller Coaster Ride Illusions Will bend your Mind
                </div>
                <div class="vid_views2">Bright Side • 13.7k Views • 2 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>

    <div id="video3" onclick="loader_OT2()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/l76i0pwm85byewl/_20201025_100749.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">CSS gradient Shadow Loader Animation Effects | HTML Animation Effects 
                </div>
                <div class="vid_views2">Online Tutorials  • 8.4k Views • 3 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>
   
   <div onclick="close_vid3()">
       <i class="fa fa-angle-left" id="cls"></i>
   </div>  
   <div class="cls_txt" onclick="close_vid3()"><i class="fa fa-angle-left"></i> &nbsp; Back</div> </div>
    <script>
        var video2=document.getElementById("sub-video");
        var title2=document.getElementById("video_title2");
        var channel2=document.getElementById("video_chanl2");
        var namee2=document.getElementById("chanl_name2");
        var views2=document.getElementById("viws2");
        var comment2=document.getElementById("admi_com2");
        var count2=document.getElementById("count2");
        
        var page2=document.getElementById("sub_page")
    </script>
        <!----- 

=========================================
       Video page of explore tab
=========================================
 
 -->
 
   <div id="page">
   <div onclick="close_vid()">
       <i class="fa fa-angle-left" id="cls"></i>
   </div>
       <div class="cont">
           <iframe src="https://www.youtube.com/embed/uD4izuDMUQA" id="main-video"></iframe>
           </div>
           <div class="video-d">
           <div class="video_title" id="video_title">TimeLapse of the entire Future</div>
           <div>
               <i class="fa fa-angle-down"></i>           </div>
           </div>
           
           <div class="reviews" id="viws">49M views • 1 year</div>
           <div class="strip">
               <div id="likes" ><i class="material-icons" id="strip_i">thumb_up_alt</i>
               <br>
               1.1k
               </div>
               <div id="dislikes">
                <i class="material-icons"  id="strip_i">thumb_down_alt</i>
                <br>
                125
                </div>
                <div id="share">
                    <i class="fa fa-share" id="strip_i"></i>
                    <br> Share
                </div>
                <div id="download">
                    <i class="fa fa-download" id="strip_i"></i>
                    <br>
                    Download
                </div>
                <div id="save">
                    <ion-icon name="duplicate" id="strip_io"></ion-icon>
                    <br>
                    Save
                </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="video_channel">
              <div ><img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0" id="video_chanl">
              </div>
              <div class="channel_cont">
                  <div class="chanl_name" id="chanl_name">
                      MelodySheep
                  </div>
                  <div class="join">
                      SUBSCRIBE
                  </div>
              </div>
              <ion-icon name="notifications-outline" class="bell"></ion-icon>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           
           <div class="comments">
               <div class="com-pannel">
                  <div class="count"id="count">
                  Comments &nbsp;&nbsp;<b>983 </b>
                  </div>
                  <div class="arrow">
                      <ion-icon name="code-outline"></ion-icon>
                  </div>
                  
               </div>
               <div class="admi" id="admi_com">
                   <img src="https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0">  I feel like I should pay for watching This 🤐
               </div>
           </div>
           <hr width="99.5%" color="#AAABAD" style="opacity:0.5" >
           <div class="suggestions">
               <div class="autoplay-pannel">
                   <div class="autoplay">Up Next</div>
                   <div class="noo">
                   Autoplay &nbsp; &nbsp;
                   <div class="no">
                       <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked>
    <label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
                   </div>
               </div>
           </div>
        </div>
          <br>
           <div  id="video3" onclick="entire_future()"> 
           <div class="vid_img2">
           <img src="https://dl.dropbox.com/s/t1956zc02abf8vu/_20201025_114937.JPG?dl=0" > </div>
            <div class="pannel2">
                <div class="vid_channel2"> <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0"> </div>
                <div class="vid_des2">
                    <div class="vid_title2">TIMELAPSE OF THE ENTIRE UNIVERSE : A Journey to the end of time (4k)</div>
                    <div class="vid_views2">MelodySheep • 48M Views • 1 year ago</div>
                </div>
                <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
            </div>
        </div>
        <br>
    <div id="video3" onclick="terror_crocs()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/n20kezfd5lu4pnr/_20201024_131311.JPG?dl=0">
        </div>
        <div class="pannel2">
        <div class="vid_channel2">
            <img src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0">
            </div>
            
            <div class="vid_des2">
                <div class="vid_title2">What If Terror Crocs were still alive and not extinct?</div>
                
                <div class="vid_views2">What If • 7.3k Views • 3 days  ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more2"></ion-icon>
        </div>
        <br>
    </div>
     <div id="video3" onclick="minecraft()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/1cswvxjwx2dnge9/_20201025_162937.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">MineCraft 360° VR Roller Coaster Ride Illusions Will bend your Mind
                </div>
                <div class="vid_views2">Bright Side • 13.7k Views • 2 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>

    <div id="video3" onclick="loader_OT()">
        <div class="vid_img2">
            <img src="https://dl.dropbox.com/s/l76i0pwm85byewl/_20201025_100749.JPG?dl=0">
        </div>
            <div class="pannel2">
               <div class="vid_channel2">
                   <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0">
               </div>
                   <div class="vid_des2">
                      <div class="vid_title2">CSS gradient Shadow Loader Animation Effects | HTML Animation Effects 
                </div>
                <div class="vid_views2">Online Tutorials  • 8.4k Views • 3 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more2">
      </ion-icon>
    </div>
  <br>
</div>
    <div class="cls_txt" onclick="close_vid()"><i class="fa fa-angle-left"></i> &nbsp; Back</div>
    </div>
    <script>
        var video=document.getElementById("main-video");
        var title=document.getElementById("video_title");
        var channel=document.getElementById("video_chanl");
        var namee=document.getElementById("chanl_name");
        var views=document.getElementById("viws");
        var comment=document.getElementById("admi_com");
        var count=document.getElementById("count");
    </script>
    
            <div id="his_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back1" onclick="back1()"></ion-icon>
                History 
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
            </div>
            <div class="searche">
                <ion-icon name="search-outline"></ion-icon><input type="text" placeholder="Search Your History">
            </div>
            <br>
            <div class="Today">
                Today
            </div>
            <br>
            
            <img src="https://dl.dropbox.com/s/uyflko1xb0obczl/_20201028_081014.JPG?dl=0">
        </div>
         
         
          <div id="movie_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back"  onclick="back7()"></ion-icon>
            Your Movies 
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
                
            </div>
        <div class="later">You dont have any Purchased Movies </div>
        </div>
    
        <div id="down_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back2" onclick="back2()"></ion-icon>
                Downloads
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
            </div>
          <img src="https://dl.dropbox.com/s/acv5n2crgkd9qme/_20201028_084446.JPG?dl=0">
        </div>
        
        
        <div id="Your-videos">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back3" onclick="back3()"></ion-icon>
                Your Videos
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
            </div>
          <img src="https://dl.dropbox.com/s/jc3p1m966qh94i5/_20201028_100748.JPG?dl=0">
          <div class="cap">Share Your videos with anyone, or everyone</div>
          <div class="v-up">Upload Video</div>
        </div>
        
         <div id="liked_section">
            <div class="hedar">
            <div>
                <ion-icon name="arrow-back-outline" class="go_back" id="back1" onclick="back4()"></ion-icon>
                Downloads
                </div>
                <div>
                    <ion-icon name="search-outline" class="sarch"></ion-icon>
                     <ion-icon name="ellipsis-vertical" class="history_m"></ion-icon>
                </div>
            </div>
          <img src="https://dl.dropbox.com/s/55uq2mo6b3shw6g/_20201028_103649.JPG?dl=0">
          <img src="https://dl.dropbox.com/s/wuct00mt8ezsgyn/_20201028_103501.JPG?dl=0">
        </div>
        
     <div id="home-f">
  <div id="roll">
    <div style="background:none;border:none;
    display:;margin-right:0vw">
        <img src="https://dl.dropbox.com/s/68k2d9tag89gy5d/_20201023_162502.JPG?dl=0" id="shorts"></div>
        <div style="background:#AAABAD;margin-right:3vw">All</div>
        <div>JS</div>
        <div>CSS</div>
        <div>Horror</div>
        <div>movies</div>
        <div>Universe</div>
        <div> Cosmic</div>
        <div>Haunting</div>
        <div>Anime</div>
    </div>
    <img src="https://dl.dropbox.com/s/7b877z7mgaw4an1/_20201027_215442.JPG?dl=0" class="ads">
      <div id="video1" onclick="future()">
        <div class="vid_img">
          <img src="https://dl.dropbox.com/s/fw1qup2o2mfrfoo/_20201024_072139.JPG?dl=0">
        </div>
           <div class="pannel">
            <div class="vid_channel">
             <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0">
            </div>
            
            <div class="vid_des">
                <div class="vid_title">TIMELAPSE OF THE ENTIRE FUTURE : A Journey to the end of time (4k)</div>
                
                <div class="vid_views">MelodySheep • 48M Views • 1 year ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
        </div>
        <br>
    </div>
    
    <div id="video1" onclick="terror_crocs()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/n20kezfd5lu4pnr/_20201024_131311.JPG?dl=0">
        </div>
        <div class="pannel">
        <div class="vid_channel">
            <img src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0">
            </div>
            
            <div class="vid_des">
                <div class="vid_title" >If Terror Crocs were still alive and not extinct?</div>
                
                <div class="vid_views">What If • 7.3k Views • 3 days  ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
        </div>
        <br>
    </div>
    
    
      <div id="video1" onclick="life_beyond()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/5t6bpdvucg56sz0/_20201024_072050.JPG?dl=0">
        </div>
        <div class="pannel">
        <div class="vid_channel">
            <img src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0">
            </div>
            
            <div class="vid_des">
                <div class="vid_title"> LIFE BEYOND II : The Museum of Alien Life (4k)</div>
                
                <div class="vid_views">MelodySheep • 29.8M Views • 14 days ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
        </div>
        <br>
    </div>
        
         <div id="video1" onclick="minecraft()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/1cswvxjwx2dnge9/_20201025_162937.JPG?dl=0">
        </div>
            <div class="pannel">
               <div class="vid_channel">
                   <img src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0">
               </div>
                   <div class="vid_des">
                      <div class="vid_title">MineCraft 360° VR Roller Coaster Ride <br>Illusions Will bend your Mind
                </div>
                <div class="vid_views">Bright Side • 13.7k Views • 2 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more">
      </ion-icon>
    </div>
  <br>
</div>

<img src="https://dl.dropbox.com/s/idezvsm827dprh7/_20201027_220245.JPG?dl=0" class="ads">
      <div id="video1" onclick="loader_OT()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/l76i0pwm85byewl/_20201025_100749.JPG?dl=0">
        </div>
            <div class="pannel">
               <div class="vid_channel">
                   <img src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0">
               </div>
                   <div class="vid_des">
                      <div class="vid_title">CSS gradient Shadow Loader Animation Effects | HTML Animation Effects 
                </div>
                <div class="vid_views">Online Tutorials  • 8.4k Views • 3 days ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more">
      </ion-icon>
    </div>
  <br>
</div>
    
      <div id="video1" onclick="mars_base()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/f6yol2ir2tgvz27/_20201023_185539.JPG?dl=0">
        </div>
            <div class="pannel">
               <div class="vid_channel">
                   <img src="https://dl.dropbox.com/s/604rvjcnzxrf8tl/images%20%282%29.jpeg?dl=0">
               </div>
            
            <div class="vid_des">
                <div class="vid_title">Building a Mars Base is a horrible idea: Lets do it
                </div>
                
                <div class="vid_views">Kurzgesagt - In a Nutshell • 11k Views • 1 year ago
                </div>
             </div>
          <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
       </div>
      <br>
   </div>
    
     <div id="video1" onclick="binod()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/nmynz597cdwudej/_20201024_153327.JPG?dl=0">
        </div>
        <div class="pannel">
        <div class="vid_channel">
            <img src="https://dl.dropbox.com/s/cy7dzvrvsi0wgyr/images%20%281%29.png?dl=0">
            </div>
            
            <div class="vid_des">
                <div class="vid_title">Who Is BINOD ?&nbsp;  How we created a VIRAL Meme</div>
                
                <div class="vid_views">Slay Point • 15M Views • 2 months ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
        </div>
        <br>
    </div>
    
    <div id="video1" onclick="egypt()">
        <div class="vid_img">
            <img src="https://dl.dropbox.com/s/dm8dbua7lxv8eft/_20201025_100125.JPG?dl=0">
        </div>
        <div class="pannel">
        <div class="vid_channel">
            <img src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0">
            </div>
            
            <div class="vid_des">
                <div class="vid_title">What if YOU were Alive in ancient Egypt ? </div>
                
                <div class="vid_views">What If • 6.7k Views • 1 months ago</div>
            </div>
            <ion-icon name="ellipsis-vertical" class="more"></ion-icon>
        </div>
        <br>
    </div>
    
    <br><br>
    </div></div>
        <div id="bottom">
            <div id="home" onclick="home()">
                 <i class="material-icons" id="b-icon">home</i>
          <br>Home
            </div>
            <div class="explore" style="font-size:9px" id="ex" onclick="explore()">
                <ion-icon name="compass" id="b-icon" style="font-size:24px"></ion-icon><br>Explore
            </div>
            <div id="add" onclick="add()">
                <ion-icon name="add-circle-outline" id="add"></ion-icon>
            </div>
            <div id="subs" onclick="subs()">
                 <i class="material-icons" id="b-icon">subscriptions</i><br>Subscriptions
            </div>
            
            <div id="library" onclick="library()">
                <i class="material-icons">video_library</i><br>Library
            </div>
            
            
            <!-- Trending Tab -->
            
             
            <script>
                var home_icon=document.getElementById("home");
 var explore_icon=document.getElementById("ex");
 var add_icon=document.getElementById("add");
 var subs_icon=document.getElementById("subs");
 var library_icon=document.getElementById("library");
 var explore_t=document.getElementById("trending_tab");

var home_t=document.getElementById("home-f");

var create=document.getElementById("create");
var full=document.getElementById("full-code");

var subs_t=document.getElementById("subs_tab");
var library_t=document.getElementById("library-tab");

var history_t=document.getElementById("his_section");
var headr=document.getElementById("hedr");

var down_t=document.getElementById("down_section");
var my_vid=document.getElementById("Your-videos");
var liked_v=document.getElementById("liked_section");

var later=document.getElementById("later_section");

var movies_t=document.getElementById("movie_section");

var vid_p=document.getElementById("page");

var bottom=document.getElementById("bottom");

var page1=document.getElementById("tr_page");

var video1=document.getElementById("tr-video")

var notif_t=document.getElementById("notif_section");
var profile_t=document.getElementById("profile");

var bottom=document.getElementById("bottom")

var search_t=document.getElementById("search_tab");

var load=document.getElementById("loader");
            </script>
        </div>
        <script>
            


     //.      Jai AIMU 🔥
     alert(`Hey guys I just signed up on Codepen.

Click on the link to see it in Codepen and Follow me there for more 🤗❤

https://codepen.io/Justin_2005/pen/abZYyxX

Support AIMU  here and show us some love 🤗❤

https://codepen.io/A-I-M-U

JAI AIMU 🔥
     `);
     
     alert(`Guys : Attention please ⛔

Because My dropbox is not working properly so many images wont load. 

As it is not my fault so please take it with a grain of salt.

You can watch videis too`)
     
window.onload=function start(){
     
    load.style.display="none";
    
    full.style.display="block"
}



function home(){

    home_icon.style.color="red";
    
    explore_icon.style.color="var(--gray)";
    
    add_icon.style.color="var(--gray)";
    
    subs_icon.style.color="var(--gray)";
    
    library_icon.style.color="var(--gray)"
    
    explore_t.style.display="none";
    
    home_t.style.display="block"
    
    home_t.style.animation="0.3s show"
    
    subs_t.style.display="none"
    
    library_t.style.display="none"
    
    history_t.style.display="none";
    
    hedr.style.display="flex";
    
    down_t.style.display="none";
    
    my_vid.style.display="none";
    
    liked_v.style.display="none";
    
    later.style.display="none";
    
    movies_t.style.display="none";
    
    notif_t.style.display="none";
    
    full.style.display="block"
}

function explore(){

    home_icon.style.color="var(--gray)";
    
    explore_icon.style.color="red";
    
    add_icon.style.color="var(--gray)";
    
    subs_icon.style.color="var(--gray)";
    
    library_icon.style.color="var(--gray)"
    
    explore_t.style.display="block";
    
    home_t.style.display="none"
    
    explore_t.style.animation="0.3s show"
    
    subs_t.style.display="none"
    
    library_t.style.display="none"
    
    history_t.style.display="none";
    
    hedr.style.display="flex";
     
    down_t.style.display="none";
   
    my_vid.style.display="none";
    
    liked_v.style.display="none";
    
    later.style.display="none";
    
    movies_t.style.display="none";
    
    notif_t.style.display="none";
    
    full.style.display="block"
}

function add(){

    create.style.bottom="0px"
    
    create.style.animation="0.3s up"
    
    full.style.opacity="0.6"
}

function subs(){

    home_icon.style.color="var(--gray)";
    
    explore_icon.style.color="var(--gray)";
    
    add_icon.style.color="var(--gray)";
    
    subs_icon.style.color="red";
    
    library_icon.style.color="var(--gray)"
    
    explore_t.style.display="none";
    
    home_t.style.display="none"
    
    subs_t.style.animation="0.3s show"
    
    subs_t.style.display="block"
    
    library_t.style.display="none"
    
    history_t.style.display="none";
    
    hedr.style.display="flex";
    
    down_t.style.display="none";
    
    my_vid.style.display="none";
    
    liked_v.style.display="none";
    
    later.style.display="none";
    
    movies_t.style.display="none";
   
    notif_t.style.display="none";
    
    full.style.display="block"
}

function library(){

    home_icon.style.color="var(--gray)";
    
    explore_icon.style.color="var(--gray)";
    
    add_icon.style.color="var(--gray)";
    
    subs_icon.style.color="var(--gray)";
    
    library_icon.style.color="red"
    
    explore_t.style.display="none";
    
    home_t.style.display="none";
    
    subs_t.style.display="none";
    
    library_t.style.animation="0.3s show"
    
    library_t.style.display="block"
    
    history_t.style.display="none";
    
    hedr.style.display="flex";
    
    down_t.style.display="none";
    
    my_vid.style.display="none";
    
    liked_v.style.display="none";
    
    later.style.display="none";
   
    movies_t.style.display="none";
    
    notif_t.style.display="none";
    
    full.style.display="block"
}


function close_create(){

    create.style.bottom="-140vh"
    
    create.style.animation="0.5s down"
    
    full.style.opacity="1"
    
    
}

function history(){

    history_t.style.display="block";
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    history_t.style.animation="0.3s show"
}
function back1(){
    
    history_t.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
}

function download(){

    down_t.style.display="block";
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    down_t.style.animation="0.3s show"
}

function back2(){
    
    down_t.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
}

function mine(){

    my_vid.style.display="block"
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    my_vid.style.animation="0.3s show"
}


function back3(){
    
    my_vid.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
    
}


function liked(){
    
    liked_v.style.display="block"
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    liked_v.style.animation="0.3s show"
}

function back4(){

    liked_v.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
}

function watch_l(){
    
    later.style.display="block"
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    later.style.animation="0.3s show"
}

function back6(){

    later.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
}

function movies(){
    
    movies_t.style.display="block"
    
    library_t.style.display="none";
    
    hedr.style.display="none"
    
    movies_t.style.animation="0.3s show"
}

function back7(){
    
    movies_t.style.display="none";
    
    library_t.style.display="block";
    
    hedr.style.display="flex";
}

function future(){
    
    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none"
    
      video.src="https://www.youtube.com/embed/uD4izuDMUQA";
    title.innerHTML="TimeLapse of the Entire Future"
    channel.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    namee.innerHTML="MelodySheep";
    views.innerHTML="48M views • 1 year ago"
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  I feel like I should pay for watching this😶🤐";
     count.innerHTML=" Comments &nbsp;&nbsp;<b>983 </b>"
}

 /////////// Page functions 
 
 function entire_future(){
    video.src="https://www.youtube.com/embed/TBikbn5XJhg";
    title.innerHTML="TimeLapse of the Entire Universe"
    channel.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    namee.innerHTML="MelodySheep";
    views.innerHTML="29M views • 1 year ago"
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  You guys are Literally Amazing 😶🤐";
     count.innerHTML=" Comments &nbsp;&nbsp;<b>1.6k </b>"
}

function entire_future1(){
    video1.src="https://www.youtube.com/embed/TBikbn5XJhg";
    title1.innerHTML="TimeLapse of the Entire Universe"
    channel1.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    namee1.innerHTML="MelodySheep";
    views1.innerHTML="29M views • 1 year ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  You guys are Literally Amazing 😶🤐";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>1.6k </b>"
}

function entire_future2a(){

    video2.src="https://www.youtube.com/embed/TBikbn5XJhg";
    title2.innerHTML="TimeLapse of the Entire Universe"
    channel2.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    namee2.innerHTML="MelodySheep";
    views2.innerHTML="29M views • 1 year ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  You guys are Literally Amazing 😶🤐";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>1.6k </b>"
}




function terror_crocs(){

    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/gX1JhbYrj5A";
    title.innerHTML="What if Terror Crocs were Still Alive ?"
    channel.src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0";
    namee.innerHTML="What If";
    views.innerHTML="7.3k views  • 3 day ago"
    
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  First Thing: RIP me ☠";
      count.innerHTML=" Comments &nbsp;&nbsp;<b>1.1k </b>"
}

function terror_crocs1(){

    video1.src="https://www.youtube.com/embed/gX1JhbYrj5A";
    title1.innerHTML="What if Terror Crocs were Still Alive ?"
    channel1.src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0";
    namee1.innerHTML="What If";
    views1.innerHTML="7.3k views  • 3 day ago"
    
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  First Thing: RIP me ☠";
      count1.innerHTML=" Comments &nbsp;&nbsp;<b>1.1k </b>"
}

function terror_crocs2(){

    video2.src="https://www.youtube.com/embed/gX1JhbYrj5A";
    title2.innerHTML="What if Terror Crocs were Still Alive ?"
    channel2.src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0";
    namee2.innerHTML="What If";
    views2.innerHTML="7.3k views  • 3 day ago"
    
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  First Thing: RIP me ☠";
      count2.innerHTML=" Comments &nbsp;&nbsp;<b>1.1k </b>"
}


function minecraft(){

    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/pVI_qqqNr9Q";
    title.innerHTML="MineCraft 360° VR Roller Coaster Ride Illusions will bend your Mind"
    channel.src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0";
    namee.innerHTML="Bright Side";
    views.innerHTML="13.7k views • 2 days ago"
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  This is brain racking 😰😵";
      count.innerHTML=" Comments &nbsp;&nbsp;<b>679</b>"
}

function minecraft1(){

    video1.src="https://www.youtube.com/embed/pVI_qqqNr9Q";
    title1.innerHTML="MineCraft 360° VR Roller Coaster Ride Illusions will bend your Mind"
    channel1.src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0";
    namee1.innerHTML="Bright Side";
    views1.innerHTML="13.7k views • 2 days ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  This is brain racking 😰😵";
      count1.innerHTML=" Comments &nbsp;&nbsp;<b>679</b>"
}



function minecraft2(){

    video2.src="https://www.youtube.com/embed/pVI_qqqNr9Q";
    title2.innerHTML="MineCraft 360° VR Roller Coaster Ride Illusions will bend your Mind"
    channel2.src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0";
    namee2.innerHTML="Bright Side";
    views2.innerHTML="13.7k views • 2 days ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  This is brain racking 😰😵";
      count2.innerHTML=" Comments &nbsp;&nbsp;<b>679</b>"
}



function loader_OT(){

    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/QJfD-q8IoIU";
    title.innerHTML="CSS Shadow Gradient Loader Animation Effects | HTML Animation Effects"
    channel.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee.innerHTML="Online Tutorials";
    views.innerHTML="8.4k views • 3 days ago"
    comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Extra Ordinary Tutorial 😶";
     count.innerHTML=" Comments &nbsp;&nbsp;<b>409</b>"
}

function loader_OT1(){
    
    video1.src="https://www.youtube.com/embed/QJfD-q8IoIU";
    title1.innerHTML="CSS Shadow Gradient Loader Animation Effects | HTML Animation Effects"
    channel1.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee1.innerHTML="Online Tutorials";
    views1.innerHTML="8.4k views • 3 days ago"
    comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Extra Ordinary Tutorial 😶";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>409</b>"
}

function loader_OT2(){
    
    video2.src="https://www.youtube.com/embed/QJfD-q8IoIU";
    title2.innerHTML="CSS Shadow Gradient Loader Animation Effects | HTML Animation Effects"
    channel2.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee2.innerHTML="Online Tutorials";
    views2.innerHTML="8.4k views • 3 days ago"
    comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Extra Ordinary Tutorial 😶";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>409</b>"
}

function close_vid(){
    
     vid_p.style.display="none"
    
    home_t.style.display="block";
    
    hedr.style.display="flex";
    
    bottom.style.display="flex"
    
    video.src=" &nbsp; "
}

function close_vid2(){
    
    page1.style.display="none"
    
    explore_t.style.display="block";
    
    hedr.style.display="flex";
    
    bottom.style.display="flex"
    
    video1.src=" &nbsp; "
}

function close_vid3(){
    
    page2.style.display="none"
    
    subs_t.style.display="block";
    
    hedr.style.display="flex";
    
    bottom.style.display="flex"
    
    video2.src=" &nbsp; "
}


function life_beyond(){
    
     vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/ThDYazipjSI";
    
    title.innerHTML="Life Beyond II : The Museum of Alien Life"
    
    channel.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    
    namee.innerHTML="MelodySheep";
    
    views.innerHTML="29.8M views  • 14 day ago"
    
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  The BEST Video On YOUTUBE ( Gaurenteed )";
     
      count.innerHTML=" Comments &nbsp;&nbsp;<b>1.1k </b>"
}

function mars_base(){

    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
     video.src="https://www.youtube.com/embed/uqKGREZs6-w";
    
    title.innerHTML="Building A Mars base is a horrible Idea : Lets do it "
    
    channel.src="https://dl.dropbox.com/s/604rvjcnzxrf8tl/images%20%282%29.jpeg?dl=0";
    
    namee.innerHTML="Kurzgesagt - In a nutshell";
    
    views.innerHTML="11k views  • 1 year  ago"
    
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Dont wanna Go to mars. ⚰";
     
      count.innerHTML=" Comments &nbsp;&nbsp;<b>2.1k </b>"
}

function binod(){
    
    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/n8vlEklS3gA";
    
    title.innerHTML="Who is BINOD ? How we created a VIRAL meme"
    
    channel.src="https://dl.dropbox.com/s/cy7dzvrvsi0wgyr/images%20%281%29.png?dl=0";
    
    namee.innerHTML="Slay Point";
    
    views.innerHTML="15M views  • 2 months ago"
    
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Binod ";
     
      count.innerHTML=" Comments &nbsp;&nbsp;<b>1.1k </b>"
    
}

function egypt(){
    
    vid_p.style.display="block";
    
    vid_p.style.animation="0.3s slide1 linear"
    
    home_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video.src="https://www.youtube.com/embed/WqJd8slanIo";
    
    title.innerHTML="What if you were alive in Ancient Egypt ?"
    
    channel.src="https://dl.dropbox.com/s/jb8aouokdfc7apa/download.png?dl=0";
    
    namee.innerHTML="What If";
    
    views.innerHTML="6.7k views  • 1 months ago"
    
     comment.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Egyptians were so Advanced 😮 ";
     
      count.innerHTML=" Comments &nbsp;&nbsp;<b>567 </b>"
}


function entire_future2(){
    
    
    page1.style.display="block";
    
    page1.style.animation="0.3s slide1 linear"
    
    explore_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video1.src="https://www.youtube.com/embed/TBikbn5XJhg";
    title1.innerHTML="TimeLapse of the Entire Universe"
    channel1.src="https://dl.dropbox.com/s/tm8rofw5945tlze/unnamed.jpg?dl=0";
    namee1.innerHTML="MelodySheep";
    views1.innerHTML="29M views • 1 year ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  You guys are Literally Amazing 😶🤐";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>1.6k </b>"
     
     
}

function t_series(){

    page1.style.display="block";
    
    page1.style.animation="0.3s slide1 linear"
    
    explore_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video1.src="https://www.youtube.com/embed/TCx1yMegJ4A";
    title1.innerHTML="Nach Meri Rani : Guru Randhawa Feat Nora Fatehi | Tanishk Bagchi | Nikhita Gandhi "
    channel1.src="https://dl.dropbox.com/s/altj8pn04migwsp/images%20%281%29.png?dl=0";
    namee1.innerHTML="T series";
    views1.innerHTML="29M views • 1 year ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Mast gaana h 😍";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>345 </b>"
     
}

function clock(){
    
    page1.style.display="block";
    
    page1.style.animation="0.3s slide1 linear"
    
    explore_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video1.src="https://www.youtube.com/embed/_21YgD_EqxI";
    title1.innerHTML="Dark Analog Clock UI HTML Tutorial"
    channel1.src="https://dl.dropbox.com/s/pfwsejfc01ip4zm/images%20%282%29.jpeg?dl=0";
    namee1.innerHTML="Coding Dragon";
    views1.innerHTML="1.2k views • 5 months ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'>  Mast h bawa 😍";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>345 </b>"
     
}


function light(){
    
    page1.style.display="block";
    
    page1.style.animation="0.3s slide1 linear"
    
    explore_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video1.src="https://www.youtube.com/embed/_13a3r6MYeM";
    title1.innerHTML="CSS Tubelight Animation Glowing Effect | Text Animation Effects"
    channel1.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee1.innerHTML="Online Tutorials";
    views1.innerHTML="4M views • 5 days  ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Woooow😮";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>345 </b>"
}

function top_20(){
    
    page1.style.display="block";
    
    page1.style.animation="0.3s slide1 linear"
    
    explore_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video1.src="https://www.youtube.com/embed/n4VXcYWvETU";
    title1.innerHTML="Top CSS and Js effects of July 2020"
    channel1.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee1.innerHTML="Online Tutorials";
    views1.innerHTML="4M views • 5 days  ago"
     comment1.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Woooow😮";
     count1.innerHTML=" Comments &nbsp;&nbsp;<b>345 </b>"
    
    
    
}




function indian_island(){
    
    page2.style.display="block";
    
    page2.style.animation="0.3s slide1 linear"
    
    subs_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video2.src="https://www.youtube.com/embed/l935ZK6VUSc";
    title2.innerHTML="Indian Island Hides something you are not supposed to see"
    channel2.src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0";
    namee2.innerHTML="Bright Side";
    views2.innerHTML="284k  views • 1 days  ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Woooow😮";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>345 </b>"
    
    
}

function asteroid_mining(){
    
    page2.style.display="block";
    
    page2.style.animation="0.3s slide1 linear"
    
    subs_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video2.src="https://www.youtube.com/embed/y8XvQNt26KI";
    title2.innerHTML="Unlimited Resources from Space - Asteroid Mining"
    channel2.src="https://dl.dropbox.com/s/604rvjcnzxrf8tl/images%20%282%29.jpeg?dl=0";
    namee2.innerHTML="Kurzgesagt - In a nutshell";
    views2.innerHTML="33M  views • 1 days  ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Kurzgesagt without birds is incomplete 😝";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>4.5k</b>";
}


function black_magic(){
    page2.style.display="block";
    
    page2.style.animation="0.3s slide1 linear"
    
    subs_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video2.src="https://www.youtube.com/embed/q2Rqe2sGWQU";
    title2.innerHTML="Indonesian Black Magic explained | Late night show"
    channel2.src="https://dl.dropbox.com/s/p3keqkbe0n3sdyz/images%20%286%29.jpeg?dl=0";
    namee2.innerHTML="Haunting Tube";
    views2.innerHTML="9M  views • 2 days  ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> One of the best past time - Haunting tube 😍";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>1.8k </b>"
}
function discoveries(){
    
    page2.style.display="block";
    
    page2.style.animation="0.3s slide1 linear"
    
    subs_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video2.src="https://www.youtube.com/embed/KDQWv7J5O2M";
    title2.innerHTML="11 discoveries  that nearly stopped diver's hearts"
    channel2.src="https://dl.dropbox.com/s/y0mb5kssvyxnuh3/images%20%282%29.jpeg?dl=0";
    
    namee2.innerHTML="Bright Side";
    views2.innerHTML="4M  views • 2 days  ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Imma go scuba diving. 😁";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>3.7k </b>"
}
function audio_player(){
    
    page2.style.display="block";
    
    page2.style.animation="0.3s slide1 linear"
    
    subs_t.style.display="none";
    
    hedr.style.display="none";
    
    bottom.style.display="none";
    
    video2.src="https://www.youtube.com/embed/xjESJSAfBXE";
    title2.innerHTML="HTML and CSS only Audio Player | HTML Audio"
    channel2.src="https://dl.dropbox.com/s/mk4c07q72ynwo63/images%20%283%29.jpeg?dl=0";
    namee2.innerHTML="Online Tutorials";
    views2.innerHTML="5.7M  views • 3 days  ago"
     comment2.innerHTML="<img src='https://dl.dropbox.com/s/dwkhtcb9gk4t866/a57e0ba3-2f8c-474e-8eff-f0482d33bdaa.jpg?dl=0'> Nice Tutorial xD 😄";
     count2.innerHTML=" Comments &nbsp;&nbsp;<b>561</b>"
}


function notifications(){
    
    full.style.display="none";
    
    notif_t.style.display="block";
    
    notif_t.style.animation="0.3s show";
}

function close_notif(){
    
    full.style.display="block";
    
    notif_t.style.display="none";
}
function open_profile(){
    
    full.style.display="none";
    
    profile_t.style.display="block";
    
    profile_t.style.animation="0.3s show";
    
    bottom.style.display="none"
}

function close_profile(){
    
    full.style.display="block";
    
    profile_t.style.display="none";
    
    profile_t.style.animation="0.5s show";
    
    bottom.style.display="flex"
}
function open_search(){
    
    search_t.style.display="block";
    
    full.style.display="none";
    
    bottom.style.display="none";
    
    search_t.style.animation="0.3s show"
}

function close_search(){
    
    search_t.style.display="none";
    
    full.style.display="block";
    
    bottom.style.display="flex";
    
}


            </script>
    </body>
</html>

2. YouTube Clone

Made by Athul Nambiar. YouTube homepage clone made using css and no js. The buttons are for decoration only and doesn’t work. Source

<html>
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- CLOUD LINKS -->
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- MY LINKS -->
        <link rel="stylesheet" href="style.css">
        <title>YouTube</title>
<style>
    body{
    margin: 0;;
}

#logo-img{
    margin-left: 12px;
}

.top-icon{
    display: inline-flex; 
    
    float: right; 
    
    margin-top: 20px;
    margin-right:5px; 
  }
 
  
 
  
  .explore{
      height:35px;
      background-color: #e0dfdf;
      border: none;
      font-size: 18;
      margin-left:12px;
  }
  
  .explore:hover{
      height:30px;
      background-color: #070707;
      border: none;
      font-size: 18;
      color:white;
      margin-left:15px;
  }
  
  li{
      color:white;
      text-decoration: none;
      display: inline-block;
      
  }
  
  li a{
      color:white;
      background-color: grey;
      text-decoration: none;
      padding:8px 20px;
      border-radius:20px;
  }
  
  .top-option-slid{
      scrollbar-width:inherit;
      margin-top: -58px;;
      margin-left:160px;
      
      white-space: nowrap;
      height:100px;
      padding-top:13px;
      overflow-y:hidden;
      
      
  }
  
  ::-webkit-scrollbar{
      overflow:hidden;
  }


#tad{
    margin: 0;
    width:100%;
    z-index: 0;
    border:0;
}

#cicon{
    height:50px;
    border-radius:50px;
    width:50px;
    margin-left:10px;
    margin-top:15px;
}


#title{
    font-size:15px;
    float:left;
    font-weight:bold;
    font-family:sans-serif;
     margin-top:-45px;
     margin-right:20px;
     margin-left:70px;
}

#des{
    font-size:14px;
    float:left;
    color:grey;
    font-family:sans-serif;
     margin-top:-15px;
     margin-right:20px;
     margin-left:70px;
}

.bottom-nav{
    width:100%;
    position:fixed;
    overflow:hidden;
    bottom:0;
    background-color:white;
    color:black;
    height:50px;

}

.active{
    color:red;
}

#bottom-icon{
    margin-top: 2px;
    display: inline-block;
    text-decoration: none;
    align-content: center;
    
    
}

#bottom-icons{
    
    padding:10px 20px;
    display: inline-block;
    color:black;
    text-decoration: none;
    text-align: center;
    position:static;
}
    </style>
    </head>

    <body>

        <div class="top">
            

            <img id="logo-img" height="70px" width="140px" src="https://logolook.net/wp-content/uploads/2021/06/Youtube-Logo.png">

            <div class="top-icon">
&nbsp;&nbsp;&nbsp;
            <i id="tv" class="fab fa-chromecast fa-lg" style="font-size:22px;" aria-hidden="true"></i>
&nbsp;&nbsp;&nbsp;            
            <i class="fa fa-bell-o" style="font-size:22px;"></i>
&nbsp;&nbsp;&nbsp;           
            <i class="fas fa-search"  style="font-size:22px;" ></i>
&nbsp;&nbsp;&nbsp;
            <i class="fas fa-user-circle" style="font-size:24px;"></i>
 &nbsp;&nbsp;&nbsp;       
        </div>
        </div>

        <!-- TOP SEARCH OPTIONS SECTION -->

        <div class="top-option">
            <button class="explore"><i class="fa fa-compass" style="font-size: 20;" aria-hidden="true"></i>
            EXPLORE</button> &nbsp; &nbsp; &nbsp;

            <hr style=":10px;color: #f0eeee; height:27px;width:1px; background-color:#424242;border:none;margin-top:-32px;margin-left:145px;">
            
            &nbsp; &nbsp; &nbsp;

          <div class="top-option-slid">

            <li><a href="#">All</a> </li>
            <li><a href="#">Music</a> </li>
            <li><a href="#">Movies</a> </li>
            <li><a href="#">Malayalam</a> </li>
            <li><a href="#">Kerala</a> </li>
            
          </div>
        </div>

        <!-- Thumbnail Section -->

        <card id="1">
            
            <img style="border:0;height:200px;width:100%;margin-top:-60px;" src="https://i.ytimg.com/vi/HOwa8uJZibw/maxresdefault.jpg">
            <div class="row">
                <div class="cicon"><img id="cicon" src="https://upload.wikimedia.org/wikipedia/en/4/4f/Karikku_Media_Logo.png"></div>
                <div class="title"><p id="title">PK - PIKASO KUNJAPAN <br>| KARIKKU FRESH</p></div>
                <div class="des"><p id="des">#KARIKKU_FRESH . 1.8M views . 2 days ago</p></div>
            </div>
        </card>

<card id="5">
            
            <img style="border:0;height:200px;width:100%;" src="https://img.youtube.com/vi/zAUAliz1TKA/maxresdefault.jpg">
            <div class="row">
                <div class="cicon"><img id="cicon" src="https://cdn.vox-cdn.com/thumbor/AwKSiDyDnwy_qoVdLPyoRPUPo00=/39x0:3111x2048/1400x1400/filters:focal(39x0:3111x2048):format(png)/cdn.vox-cdn.com/uploads/chorus_image/image/49901753/netflixlogo.0.0.png"></div>
                <div class="title"><p id="title">Minnal Murali @Tovino Thomas<br>| Netflix India | Coming Soon</p></div>
                <div class="des"><p id="des">#NetflixIndia . 10.8M views . 3 Days ago </p></div>
            </div>
        </card>    


        <card id="2">
            
            <img style="border:0;height:200px;width:100%;" src="https://img.youtube.com/vi/lgFetVAKi1A/maxresdefault.jpg">
            <div class="row">
                <div class="cicon"><img id="cicon" src="https://cdn.vox-cdn.com/thumbor/AwKSiDyDnwy_qoVdLPyoRPUPo00=/39x0:3111x2048/1400x1400/filters:focal(39x0:3111x2048):format(png)/cdn.vox-cdn.com/uploads/chorus_image/image/49901753/netflixlogo.0.0.png"></div>
                <div class="title"><p id="title">Life gonna pickup you | Netflix </p></div>
                <div class="des"><p id="des">#SINGALONG . 109K views . 2 hour ago</p></div>
            </div>
        </card>    

        <card id="3">
            
            <img style="border:0;height:200px;width:100%;" src="https://img.youtube.com/vi/XnzxEGLaPxs/maxresdefault.jpg">
            <div class="row">
                <div class="cicon"><img id="cicon" src="https://yt3.ggpht.com/ytc/AKedOLQ5di8PRC-33juzQgexaNvGqtJJcVsev5Jbsw7KkWQ=s900-c-k-c0x00ffffff-no-rj"></div>
                <div class="title"><p id="title">NightJass |Vivo Music</p></div>
                <div class="des"><p id="des">#TRENDING_10 . 3.9M views . 20 days ago</p></div>
            </div>
        </card>    

        <card id="4">
            
            <img style="border:0;height:200px;width:100%;" src="https://img.youtube.com/vi/Kqou3y8htl8/maxresdefault.jpg">
            <div class="row">
                <div class="cicon"><img id="cicon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7I3eUTp66V64iONaFdhzJwGGqw6_cAJMqYfc6YwgwB_byZiMtKeExK89TasWRFaUlhXw&usqp=CAU"></div>
                <div class="title"><p id="title">What is food is for free | Amsu</p></div>
                <div class="des"><p id="des">#YOUTUBE . 8M views . 7 days ago</p></div>
            </div>
        </card>    

        
          <div class="bottom-nav">

          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="bottom-icons" class="active"><i id="bottom-icon" class="fa fa-home" style="font-size:26px;color:red;"></i></a>
          <a href="#" id="bottom-icons"><i id="bottom-icon" class='fas fa-fire' style='font-size:26px;'></i></i></a>
          <a href="#" id="bottom-icons"><i id="bottom-icon" class="fa fa-plus-square-o" style="font-size:26px;"></i></a>
          <a href="#" id="bottom-icons"><i id="bottom-icon" class="fa fa-folder-open-o" style="font-size:26px;"></i></a>
          <a href="#" id="bottom-icons"><i id="bottom-icon" class='far fa-window-restore' style='font-size:26px;'></i></a>

          </div>

    
    </body>
</html>

3. YouTube UI clone

Made by Dinesh Rathod. CSS YouTube UI Clone with button effects. Source

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style1.css" title="" type="" />
    <meta name="" content="">
    <title>YouTube UI clone </title>
    <style>
        body{
  background-color:white;
  margin: 0;
height:300%;
  position:absolute ;
  
 
} 
@media all and (max-width:700px ) and (orientation :portrait){
   .add2{
   display: none;
 }
 
 .codepen{
  width :150px;
  font-size: 15px;
  border: 1px solid black ;
  border-radius: 10px;
  background-color: rgb(0,113,213);
  text-decoration: none ;
  text-align center ;
  Color:white ;
}
.codepen a{
  text-decoration: none ;
  color: white ;
}
header{
  background-color:#f2f2f2;
  width:100%;
  height:50px;
  position: fixed ;
 padding: 5px;
 top: 0;
 align-items: center ;
 vertical-align: middle ;
   box-shadow: 1px 1px 5px;
   z-index: 1;
}
.break{
  width: 100%;
  height: 100px;
}

.logo img{
  width:110px;
  position:absolute ;
  top: 18px;
  margin-top:0px ;
  padding: 1px;
  
}
nav{
  width:100%;
  position:fixed ;
  left:45%;
}
nav img{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
}
nav img:hover{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
  background-color: lightgray;
  border: 1px solid lightgray;
  border-radius: 10px;
  
}
main{
  position: relative ;
  top:65px;
  bottom:0px;
  left:5%;
  right:5%;
  margin-top: 5px;
  width:90%;
  z-index: 0;
  align-content: center ;
}
main img{
  width: 100%;
  
} 

footer nav{
  position:fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-right:25px;
  width: 100%;
  height: 60px;
  border: 0.2px solid black;
  box-shadow: 1px 1px 5px ;
  background-color: #f2f2f2 ;
  
}
footer nav img{
  width:27px;
  position:relative ;
  float: left;
  padding:16px;
  margin: 6px;
  cursor: pointer;
}
footer nav img:hover{
  width:27px;
  position:relative ;
  background-color: #f2f2f2 ;
  float: left;
  padding:16px;
  margin: 6px;
  cursor: pointer;
}
} 

@media all and (max-width:700px ) and (orientation :landscape){
 .add1{
   display: none;
 }.codepen{
  width :150px;
  font-size: 15px;
  border: 1px solid black ;
  border-radius: 10px;
  background-color: rgb(0,113,213);
  text-decoration: none ;
  text-align center ;
  Color:white ;
}
.codepen a{
  text-decoration: none ;
  color: white ;
}
header{
  background-color:#f2f2f2;
  width:100%;
  height:15%;
  position: fixed ;
 padding: 5px;
 top: 0;
 align-items: center ;
 vertical-align: middle ;
   box-shadow: 1px 1px 5px;
   z-index: 1;
}

.logo img{
  width:110px;
  position:absolute ;
  top: 18px;
  margin-top:0px ;
  padding: 1px;
  
}
nav{
  width:100%;
  position:fixed ;
  left:63%;
}
nav img{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
}
nav img:hover{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
  background-color: lightgray;
  border: 1px solid lightgray;
  border-radius: 10px;
  
}
main{
  position: relative ;
  top:65px;
  bottom:0px;
  left:22%;
  right:5%;
  margin-top: 5px;
  width:90%;
  z-index: 0;
  align-content: center ;
}
main img{
  width: 30%;
  float: left ;
  margin: 5px;
  
} 

footer nav{
  position:absolute ;
  left: 0;
  top:7%;
  padding:2px;
  width: 10%;
  height: 100%;
  background-color: #f2f2f2 ;
}
footer nav img{
  width:27px;
  position:relative ;
  padding:5px;
  margin: 5px;
  cursor: pointer;
}

} 

@media all and (max-width:1200px ) and (min-width :700px) and (orientation :landscape){
  body{
  background-color:white;
  margin: 0;
height:110%;
  position:absolute ;
  
 
} 
 .cast{
   display: none;
 }
   .add1{
   display: none;
 }
header{
  background-color:#f2f2f2;
  width:100%;
  height:15%;
  position: fixed ;
 padding: 5px;
 top: 0;
 align-items: center ;
 vertical-align: middle ;
   box-shadow: 1px 1px 5px;
   z-index: 1;
}

.logo img{
  width:110px;
  position:absolute ;
  top: 18px;
  margin-top:0px ;
  padding: 1px;
  
}
nav{
  width:100%;
  position:fixed ;
  left:80%;
}
nav img{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
}
nav img:hover{
  width:30px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
  background-color: lightgray;
  border: 2px solid lightgray;
  border-radius: 10px;
  
}
main{
  position: relative ;
  top:65px;
  bottom:0px;
  left:22%;
  right:5%;
  margin-top: 5px;
  width:90%;
  z-index: 0;
  align-content: center ;
}
main img{
  width: 30%;
  margin: 5px;
  float: left ;
  
} 
footer nav{
  position:absolute ;
  left: 0;
  top:20%;
  padding:2px;
  width: 10%;
  height: 100%;
  background-color: #f2f2f2 ;
  display:flex;
  flex-direction: column ;
}

footer nav img{
  width:27px;
  position:relative ;
  padding:5px;
  margin: 5px;
  cursor: pointer;
}

} 

@media all and (min-width:700px ) and (max-width :1400px) and (orientation :portrait){
 .add1{
   display: none;
 }
 body{
  background-color:white;
  margin: 0;
height:110%;
  position:absolute ;
  
 
} 
header{
  background-color:#f2f2f2;
  width:100%;
  height:3%;
  position: fixed ;
 padding: 5px;
 top: 0;
 align-items: center ;
 vertical-align: middle ;
   box-shadow: 1px 1px 5px;
   z-index: 1;
}

.logo img{
  width:110px;
  position:absolute ;
  top: 18px;
  margin-top:0px ;
  padding: 1px;
  
}
nav{
  width:100%;
  position:fixed ;
  left:75%;
}
nav img{
  width:27px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
}
nav img:hover{
  width:30px;
  position:relative ;
  float: left;
  padding:5px;
  margin: 6px;
  background-color: lightgray;
  border: 2px solid lightgray;
  border-radius: 10px;
  
}
main{
  position: relative ;
  top:65px;
  bottom:0px;
  left:10%;
  right:5%;
  margin-top: 5px;
  width:90%;
  z-index: 0;
  align-content: center ;
}
main img{
  width: 30%;
  margin: 5px;
  float: left ;
  
} 

footer nav{
  position:fixed ;
  top:50px;
  left: 0;
  padding:5px;
  width: 7%;
  border: 0.2px solid black;
  box-shadow: 1px 1px 5px ;
  background-color: #f2f2f2 ;
  
}
footer nav img{
  width:27px;
  position:relative ;
  padding:16px;
  margin: 6px;
  cursor: pointer;
}

} 
        </style>
  </head>
  
  <body>
  <!--header-->
    <header class="header">
      <div class="logo">
        <a href="#">
            
        <img src="https://i.ibb.co/Y0jJnJV/youtube1.png" alt="youtube logo">
            
        </a>
        </div>
        
        <nav>
              <a href="#">
          <img class="add2"   src="https://img.icons8.com/pastel-glyph/344/plus--v1.png " alt="Add video" />
          
        </a>
        <a href="#">            
        <img class="cast" src="https://img.icons8.com/windows/344/chromecast-cast-button.png " alt="" /></a>
        <a href="#">
          <img class="bell"          src="https://img.icons8.com/ios-filled/344/appointment-reminders--v1.png" alt="" />
        </a>
        <a class="" href="#">
          <img class="search" src="https://img.icons8.com/material-outlined/344/search--v1.png" alt="" />
          </a>
          <a href="#">
            <img class="notice"         src="https://lh6.googleusercontent.com/proxy/1LQEn2451cQ5jTfaXZ1iOHoQqOFcsQBaO7rGhiWcyCJaInUQ2qU1CUr5ZeQDZVXAKXzx_q9MK0pk5BudYKaC9_eLG93hB0cw6rdldWUU3NwVX6SLzQ " alt="" />
           </a>
      </nav>
    </header><br>
    <main>
<img src="https://i.ytimg.com/vi/TSqnJjXyOQY/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAhHYPB0QZU3K9tGe5ucV87gQPVxQ">
<img src="https://i.ytimg.com/vi/p0Qr_r1LZ-s/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB5x2cjoCe0njoRfr5Ct8ukwZMzeg">
<img src="https://i.ytimg.com/vi/DSb7tmVcZm4/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBgiWa82eDBWJvg7UleSgGmgFXQZA">
<img src="https://i.ytimg.com/vi/Bw6I-KgCSP4/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAZvDfTpYHUUBxLkTAuuhQYJbxYjg">
<img src="https://i.ytimg.com/vi/Y18nCaTrUCQ/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAMdOGbT-z1PHY3Kezj6nrFIAnp0Q">
<img src="https://i.ytimg.com/vi/cNoFX4mWCgA/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLACvtaczMzCjMxZxyB6_dyEE4w30A">
<img src="https://i.ytimg.com/vi/JIB9YBGwjbQ/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBD4GzAiaR7Oc35sfqd0wRJQYPxQw">
<img src="https://i.ytimg.com/vi/yCnrfQDro_8/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDEH7dG0s6U2v5i_YHsx-XDjzUqkw">
<img src="https://i.ytimg.com/vi/cNoFX4mWCgA/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLACvtaczMzCjMxZxyB6_dyEE4w30A">
<img src="https://i.ytimg.com/vi/Y18nCaTrUCQ/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAMdOGbT-z1PHY3Kezj6nrFIAnp0Q" alt="" />
<img src="https://i.ytimg.com/vi/fZhsM15LwG4/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAM6hzGnZXxzag6Zk5enC_BjYqPVA" alt="" />
<img src="https://i.ytimg.com/vi/u_Mnlq7RRQY/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBieNf4KgJlQcnXpcODEnwwcBCKsQ" alt="" />
<img src="https://i.ytimg.com/vi/RQ6Cz3-aYak/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDzLSDnIrwJZpBIZ-QPSxoWQzIEFA" alt="" />
<img src="https://i.ytimg.com/vi/VeaxlgRVpAk/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLB5NfekvnA_YJXQkxiomfGrWiju6A" alt="" />
<img src="https://i.ytimg.com/vi/8WJhEH9eb9o/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAIIMLNvEIWgXBHeUrqFvT1QtgbNQ" alt="" /><img src="https://i.ytimg.com/vi/kBX3dnQiu5s/hq720.jpg?sqp=-oaymwEcCK4FEIIDSEbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAw9lsazaIdrCbuZC7dpg4hg2Ts7A" alt="" />
<div class="codepen">
  
<a href="https://codepen.io/dineshrathod/full/NWdWJzW ">Click Here to Check Responsive </a>
</div>
<div class="break">
  
</div>
    </main>
    <footer>
           <nav class="footer">
              <a href="#"><img
              src="https://img.icons8.com/fluent-systems-filled/344/video-playlist.png" alt="" /></a>
        <a href="#"><img src="https://i.ibb.co/mh3yLqQ/explore.png" alt="" /></a>
        
        <a href="#">
          <img class="add1"
          src="https://img.icons8.com/pastel-glyph/344/plus--v1.png" alt="" />
        </a>
        <a href="#">
          <img src="https://i.ibb.co/w6TKkps/renew.png" alt="renew" />
          </a>
          <a href="#">
            <img 
            src="https://cdn0.iconfinder.com/data/icons/google-material-design-3-0/48/ic_video_library_48px-512.png " alt="" />
          </a>
        </a>
      </nav> 
    </footer>
  </body>
</html>

4. YouTube Desktop UI clone

Made by (JAM) Jordan Aho Mauli. YouTube Desktop UI clone with Darkmode. The menu also works. Source

<!DOCTYPE html>
<!-- BY JAM -->
<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">
    <title>JamYouTube</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="https://www.youtube.com/s/desktop/8cab6c66/img/favicon.ico" type="image/x-icon">
    <script src="script.js" defer></script>
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* BY JAM */
*,*::before,*::after{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

html{
    scroll-behavior: smooth;
}


.navbar{
    padding-top:1.5em;
    display:flex;
    justify-content:space-between;
    z-index:1;
    position:fixed;
    top:0;
    width:100%;
    padding-right:1em;
    padding-left:1em;
    background-color:white; 

}


.navbar__logo{
    display:flex;
    width:15vw;
    flex-direction:row;
    align-items:center;
    justify-content:space-around;
    height:45px;
   

}

.navbar__logo__menu{
    font-size:30px;
    color:rgb(96, 96, 96);
    
}

.navbar__logo__name{
    max-width: 100%;
    width:100px;
}

.navbar__logo__menu:hover{
    cursor:pointer;
}

.navbar__logo__name:hover{
    cursor:pointer;
}

.navbar__search{
    display:flex;
  
   height:4.6875%;
}

.navbar__search>span{
    align-self:center;
    font-size:1.5em;
    color:rgb(96, 96, 96);
    margin-left:0.2em;

}

.navbar__search>span:hover{
    cursor:pointer;
}

.navbar__search__icon{
    border:1px solid grey;
    display:flex;
    border-radius:2px;
    position:relative;
}


input[type="search"]{
    border:none;
    width:53vw;
    padding:10px;
    font-size: 16px;

}

input[type="search"]::placeholder{
    font-family:Roboto, Arial, sans-serif;
    font-size:16px;
}


.navbar__search__icon>span{
    border-left:1px solid grey;
    padding:0 1.5em;
    display:flex;
    position:absolute;
    right:0;
    height:100%;
    align-items:center;
    justify-content:center;
    color:rgb(51, 51, 51);
    background-color:rgb(248, 248, 248);
    
}

.navbar__search__icon>span:hover{
    cursor:pointer;
    
}

.navbar__search__icon>span>i{
    font-size:1.2em;
}

.navbar__options{
    width:15vw;
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}

.navbar__options__menu:hover{
    cursor:pointer;
}

.navbar__options__darktheme{
    position:relative;
    z-index:200;
}

.navbar__options__darktheme__options{
    position:absolute;
    background-color:rgb(248, 248, 248);
    right:0;
    border-radius:5px;
    height:23vh;
    display:flex;
    align-items:center;
    flex-direction:column;
    color:rgb(96, 96, 96);
    font-family:Roboto, Arial, sans-serif;
    font-weight:bold;
    border:1px solid rgb(128, 128, 128, 0.3);
    display:none;
    width:29vw;
}

.navbar__options__darktheme__options>span{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
}




.darkthemebtns{
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content:space-around;
    position:absolute;
    bottom:0;
    

}

.darkthemebtns>button{
    color:rgb(96, 96, 96);
    width:50%;
 
}



.darkthemebtns>button:hover{
    cursor:pointer;
   
}



.navbar__options>span{
    font-size:1.5em;
    color:rgb(96, 96, 96);
}

.navbar__options>span:hover{
    cursor:pointer;
}

/* MAIN */

.content{
    display:grid;
    grid-template-columns:1fr;
    grid-gap:2em;
    margin-top:9.5vh;
    position:relative;

}


.content__side{
    display:flex;
    flex-direction:column;
    height:100vh;
    position:fixed;
    background-color: white;
    width:17%;
    margin-top:20px;
}

.content__side>div{
    display:flex;
    padding:1em;
    align-items: center;
    
}

@media only screen and (max-width: 600px) {
    .content__side>div{
        flex-direction:column;

    }
    .content__side>div>a{
        display:none;
    }

  }

.content__side>div>a{
    padding:0 1.5em;
    text-decoration: none;
    color:black;
    font-family:Roboto, Arial, sans-serif;
}



.content__side>div:hover{
    cursor:pointer;
    background-color:#f2f2f2;
}

.content__side>div:hover span,svg{
    color:red;
    fill:red;
}

.content__side>div:hover svg{
    fill:red;
}

.content__side>div>span{
    font-size:1.5em;
    color:rgb(96, 96, 96);
    
}

.content__side>div:first-child>span{
    color:red;
}
.content__side>div>svg{
    width:1.5em;
    fill:rgb(96, 96, 96);
    
}
.content__side__subs,
.content__side__hist{
    border-bottom:0.5px solid grey;
}


.content__videos{
    display:grid;
    grid-gap:1em;
    grid-template-columns: repeat(auto-fill, minmax(253.484px, 1fr));
    background-color: rgb(248, 248, 248);
    padding:1em;
    padding-left:1em;
    margin-left:17%;

}


.autoWidth{
    width:auto;
}

.ad{
    width:100%;
    height: 179.53px;
    border:none;
}

.ad:hover{
    cursor:pointer;
}


.content__videos__video{
    margin-top:1em;
}

.marginLeft{
    margin-left:4em !important;
}

.show{
    display:block;
}

.hide{
    display:none;
}

.content__videos__video__caption{
    display:flex;
    
}

.content__videos__video__caption__profile{
    max-width:100%;
    width:36px;
    height:36px;
    border-radius:50%;
}

.content__videos__video__caption__info{
    margin-left:0.5em;
    
}

.content__videos__video__caption__info__title:hover{
    cursor:pointer;

}

.content__videos__video__caption__info__title{
    max-width:220px;
    
}

.content__videos__video__caption__info>p:first-child{
    margin-bottom:0.5em;
    color:rgb(3, 3, 3);
    font-weight:501;
    font-family:Roboto, Arial, sans-serif;

}

.content__videos__video__caption__info__views{
    max-width:220px;
}

.content__videos__video__caption__info>div{
    color:rgb(96, 96, 96);
    font-family:Roboto, Arial, sans-serif;
}

.views::after{
    content:".";
    margin:4px 4px;
    
}

/* DARK THEME */

.darkThemeTitle{
    color:white !important;
    
}

.darkThemeIcons{
    color:rgb(144, 144, 144) !important;
   
}

.darkThemeViews{
    color:rgb(170, 170, 170) !important;
}

.darkThemeBackground{
    background-color:#121212 !important;
   
}

.darkThemeTransparent:hover{
    background-color:rgb(170, 170, 170, 0.1)  !important;
}

/* SEARCH RESULTS */
.searchResults{
    display:none;
    flex-direction:column;
    margin-left:17%;
}



.searchResults>*{
    max-width:400px;
    padding:1em;
}

.showFlex{
    display:flex;
}

.removeFixed{
    position:static !important;
}

.noResults{
    color:red;
    font-weight:bold;
    font-size:1.2em;
    padding:1em;
    margin-top:1em;
    
}

.fullHeight{
    height:100vh;
}



        </style>
</head>
<body>
    <div class="container">
        <!-- navbar -->
        <nav class="navbar">
            <div class="navbar__logo">
                <span class="navbar__logo__menu"><i class='bx bx-menu'></i></span>
                <img class="navbar__logo__name" src="https://download.logo.wine/logo/YouTube/YouTube-Logo.wine.png" alt="youtube-logo">
            </div>
            <div class="navbar__search">
                <div class="navbar__search__icon">
                    <input type="search" placeholder="Search">
                    <span class="search__icon"><i class='bx bx-search-alt-2' ></i></span>
                </div>
                <span class="navbar__search__mic"><i class='bx bxs-microphone' ></i></span>

            </div>
            <div class="navbar__options">
                <span><i class='bx bxs-grid'></i></span>
                <div class="navbar__options__darktheme">
                    <span class="navbar__options__menu"><i class='bx bx-dots-vertical-rounded' ></i></span>
                    <div class="navbar__options__darktheme__options">
                        <span>Dark Theme</span>
                        <div class="darkthemebtns">
                            <button class="darkon">ON</button>
                           <button class="darkoff">OFF</button>
                        </div>
                    </div>
                </div>
                <span class="navbar__optons__user"><i class='bx bxs-user-circle'></i></span>
            </div>
        </nav>
        <!-- main -->

        <main class="content">
            
                <aside class="content__side">
                    <div class="content__side__home">
                        <span> <i class='bx bxs-home' ></i></span>
                        <a href="#">Home</a>
                    </div>
                    <div>
                        <span> <i class='bx bxs-compass'></i></span>
                        <a href="#">Explore</a>
                    </div>
                    <div class="content__side__subs">
                        <svg class="MuiSvgIcon-root sideBarRow__icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 8H4V6h16v2zm-2-6H6v2h12V2zm4 10v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-8c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2zm-6 4l-6-3.27v6.53L16 16z"></path></svg>
                        <a href="#">Subscriptions</a>
                    </div>
                    <div>
                        <span> <i class='bx bxs-videos' ></i></span>
                        <a href="#">Library</a>
                    </div>
                    <div class="content__side__hist">
                        <span> <i class='bx bx-history' ></i></span>
                        <a href="#">History</a>
                    </div>
                </aside>
          
            <section class="searchResults"></section>

            <section class="content__videos">
                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/g3KBSffPx4g?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/ytc/AAUvwniyT91VYICSIG8jKwkTXm3DCGcIMuFMHdFsUjDN0g=s68-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                                Watch this funny African video
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Mark Angel Comedy</p>
                                <span class="views">42M views</span><span class="duration">2 months ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/d9L2-1h2Z48?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/ytc/AAUvwngZ4gL_l_cyFSEFieSoBEju0jvJnXG2SQMMl_o7Jg=s48-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                                How To Access Your Files On A Broken Phone's Screen 
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Ayim Nelson(My friend)</p>
                                <span class="views">1B views</span><span class="duration">1 year ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/ap90npnxZzs?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/ytc/AAUvwnj437YDzAzreViXP_QtaP2VTqXo18Y9DuOaasJtRQ=s48-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                               Pink Pantherrr!!! Yesss!!!
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Pink Pather</p>
                                <span class="views">504k views</span><span class="duration">1 week ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/jdpmOxtUBqE?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/ytc/AAUvwnjg6ZYi6gGIrqeeCiJQULNmzc9USImsNyjrbBsCXg=s48-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                               Learn persian with Jordan😂️😂️😂️😂️
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Learn persian</p>
                                <span class="views">104k views</span><span class="duration">5 weeks ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/2x85khx-Cl4?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/1Q7FXOCspVt7oMNa0dwE4wQ3qjReReoSqV0zKOfitD0sHApxd0b0WgUcO514nS-kel8PNA4leAs=s48-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                                Dom Dee Tomato Parkour
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Dom Tomato</p>
                                <span class="views">10M views</span><span class="duration">2 weeks ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/VrTC3FHE8No?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="https://yt3.ggpht.com/ytc/AAUvwngo4chDDJX4rkdkybNruT_3MqEoOtirv1Ry-lAOFec=s48-c-k-c0x00ffffff-no-rj-mo" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                                The Way You Make Me Feel
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>Michael Jackson</p>
                                <span class="views">550M views</span><span class="duration">9 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="content__videos__video">
                    <iframe class="ad" src="https://www.youtube.com/embed/w3Wluvzoggg?rel=0" allowfullscreen></iframe>
                    <div class="content__videos__video__caption">
                        <img src="
                        https://yt3.ggpht.com/ytc/AAUvwnis1G8EkhYCMf1vTX7mdUhIPiaKs1hIcp_kbuB62A=s68-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
                        <div class=content__videos__video__caption__info>
                            <p class="content__videos__video__caption__info__title">
                                Tom and Jerryyy. Jam's favorite childhood cartoons.
                            </p>
                            <div class="content__videos__video__caption__info__views">
                                <p>WB kids</p>
                                <span class="views">500M views</span><span class="duration">3 weeks ago</span>
                            </div>
                        </div>
                    </div>
                </div>

            </section>

        </main>
       
        
        
    </div>
</body>
<script>
    //VIEW
class View{
    constructor(controller){
        this.controller = controller;
        let {select} = this.controller;
        //TARGETTING TAGS
        this.videoCaptions = select(".content__videos__video__caption__info__title", "all");
        this.menuBar = select(".navbar__logo__menu");
        this.searchIcon = select(".search__icon");
        this.searchBar = select("[type=search]");
        this.verticalMenu = select(".navbar__options__menu");
        this.darkThemeBox = select(".navbar__options__darktheme__options");
        this.darkOn = select(".darkon");
        this.darkOff = select(".darkoff");
        this.icons = select("i[class^=bx]", "all");
        this.backgroundMain = select(".content");
        this.side = select(".content__side");
        this.main = select(".content__videos");
        this.nav = select("nav");
        this.views = select(".content__videos__video__caption__info__views", "all");
        this.titles = select(".content__videos__video__caption__info__title", "all");
        this.sideLinks = select(".content__side a", "all");
        this.logo = select(".navbar__logo__name");
        this.home = select(".content__side__home");
        this.searchResults = select(".searchResults");


        this.listeners()

    }

    listeners(){
        let controller = this.controller;
        //PLAY VIDEO
        this.videoCaptions.forEach(caption=>{
            caption.addEventListener("click", (captionEvent)=>controller.play(captionEvent.target));
        });

        //TOGGLE DARKTHEME BOX
        this.verticalMenu.addEventListener("click", ()=>controller.toggleVerticalOptions(this.darkThemeBox));

        //DARTHEME
        this.darkOn.addEventListener("click", ()=>{
            controller.darkMode(this.nav, this.backgroundMain,
                this.main,this.side, this.icons,
                this.views, this.titles, this.sideLinks,
                 this.searchBar, this.searchIcon, this.logo)
        });

        //LIGHTHEME
        this.darkOff.addEventListener("click", ()=>{
            controller.lightMode(this.nav, this.backgroundMain,
                this.main,this.side, this.icons,
                this.views, this.titles, this.sideLinks,
                 this.searchBar, this.searchIcon, this.logo)
        });

        //HIDE SIDE BAR
        this.menuBar.addEventListener("click", ()=>{
            controller.hideSide(this.sideLinks, this.main, this.side, this.searchResults)});
        

        //SCROLL TO TOP
        [this.home, this.logo].forEach(el=>{
            el.addEventListener("click", ()=>controller.getHomePage(this.main))
        });

        //SEARCH RESULTS
        // this.searchIcon.addEventListener("click", ()=>{
        //     this.searchResultsView(this.searchBar.value,this.main, this.searchResults, this.side);
        // });
    }

//     // SEARCH RESULTS VIEW
//     searchResultsView(searchInput, main, resultsContainer, side){
//         let {titles, videos, images, channelNames, durations} 
//         = 
//         searchInput ? this.controller.searchResults(searchInput) : {};

//         main.classList.add("hide");
//         resultsContainer.classList.add("showFlex");

//         let controller = this.controller;

//         let nav = this.nav;

//         let result = "";
       
//         if(!searchInput){

//             [1,2,3].forEach((title,index)=>{
//                 result+= `
//                 <div class="content__videos__video">
//                     <iframe class="ad" src="https://www.youtube.com/embed/g3KBSffPx4g?rel=0" allowfullscreen></iframe>
//                     <div class="content__videos__video__caption">
//                         <img src="https://yt3.ggpht.com/ytc/AAUvwniyT91VYICSIG8jKwkTXm3DCGcIMuFMHdFsUjDN0g=s68-c-k-c0x00ffffff-no-rj" class="content__videos__video__caption__profile" alt="">
//                         <div class=content__videos__video__caption__info>
//                             <p class="content__videos__video__caption__info__title dynamicTitle">
//                                 Watch this funny African video
//                             </p>
//                             <div class="content__videos__video__caption__info__views dynamicViews">
//                                 <p>Mark Angel Comedy</p>
//                                 <span class="views">42M views</span><span class="duration">2 months ago</span>
//                             </div>
//                         </div>
//                     </div>
//                 </div>
//                 `
//             });
//         }else{
//             this.backgroundMain.classList.add("fullHeight");
//             result = "<div class='noResults'>Please search for something...</div>";
//         }
        
        

//         //DISPLAYING THE RESULTS OF THE SEARCH
//         resultsContainer.innerHTML = result;

//         function resultsDarkTheme(){
//               //DARK THEME FOR SEARCH RESULTS
//             let searchTitles = controller.select(".dynamicTitle", "all");
//             let searchViews = controller.select(".dynamicViews", "all");
           
//             let checkDarkThemeOnNavbar = nav.classList.contains("darkThemeBackground");
   
//         if(checkDarkThemeOnNavbar){
//             searchViews.forEach(view=>{
//                 view.classList.add("darkThemeViews");
//             });
    
//             searchTitles.forEach(title=>{
//                 title.classList.add("darkThemeTitle");
//             });
        
//         }

//         let checkDarkThemeOnSearchResults = searchViews[0].classList.contains("darkThemeViews");

//         if(!checkDarkThemeOnNavbar && checkDarkThemeOnSearchResults){
//             searchViews.forEach(view=>{
//                 view.classList.remove("darkThemeViews");
//             });

//             searchTitles.forEach(title=>{
//                 title.classList.remove("darkThemeTitle");
//             });
        
//     }
//     }
    
//     let darkThemeResults = setInterval(resultsDarkTheme, 100);
//     // if(searchInput) clearInterval(darkThemeResults);

//     // PLAY VIDEOS FOR SEARCH RESULTS
//     let videoCaptions = this.controller.select(".dynamicTitle", "all");

//     videoCaptions.forEach(caption=>{
//         caption.addEventListener("click", (captionEvent)=>{
//             this.controller.play(captionEvent.target)
//         });
//     });

    

//  }
}



//Controller
class Controller{
    initialize(view){
        this.view = view;

    }

    select(cssRule, number="one"){
        return (
             (number=="one") ? document.querySelector(cssRule)
            :(number=="all") ? [...document.querySelectorAll(cssRule)]
            :(()=>{throw "No tags found on your youtube page, JAM"})()
            );
    }

    play(caption){
        let video = caption.parentElement.parentElement.previousElementSibling;
        
        video.tagName.toLowerCase().startsWith("iframe") ? video.src+="&autoplay=1":
        alert("Sorry Azize Delam 😬️😬️😬️, video not available!");
          
    }

    toggleVerticalOptions(darkThemeBox){
        darkThemeBox.classList.toggle("show")
    }

    darkMode(nav, backgroundMain, main, side,
         icons,views, titles, sideLinks, searchBar, searchIcon, logo){

       [nav, backgroundMain, main, side, searchBar, searchIcon].forEach(el=>{
            el.classList.add("darkThemeBackground")
        });

        icons.forEach(icon=>{
            icon.classList.add("darkThemeIcons")
        });

        views.forEach(view=>{
            view.classList.add("darkThemeViews")
        });

        titles.forEach(title=>{
            title.classList.add("darkThemeTitle")
        });
    

        sideLinks.forEach(link=>{
            link.classList.add("darkThemeViews")
            link.parentElement.classList.add("darkThemeTransparent")
        });

        searchBar.classList.add("darkThemeTitle");

        logo.src="https://i.ibb.co/wLsSHkh/logo.png"

        
       

    }

    lightMode(nav, backgroundMain, main, side,
         icons,views, titles, sideLinks, searchBar, searchIcon, logo){
        [nav, backgroundMain, main, side, searchBar, searchIcon].forEach(el=>{
            el.classList.remove("darkThemeBackground")
        });


        icons.forEach(icon=>{
            icon.classList.remove("darkThemeIcons")
        });

        views.forEach(view=>{
            view.classList.remove("darkThemeViews")
        });

        titles.forEach(title=>{
            title.classList.remove("darkThemeTitle")
        });

        sideLinks.forEach(link=>{
            link.classList.remove("darkThemeViews")
            link.parentElement.classList.remove("darkThemeTransparent")
        });

        searchBar.classList.remove("darkThemeTitle");

        logo.src="https://download.logo.wine/logo/YouTube/YouTube-Logo.wine.png";
        
    }

    hideSide(sideLinks, main, side, searchResults){
        sideLinks.forEach(link=>{
            link.classList.toggle("hide")
        });

        side.classList.toggle("autoWidth");

        (screen.width <= "600") && (()=>{
            side.classList.remove("autoWidth");
        })();

        [main, searchResults].forEach(el=>{
            el.classList.toggle("marginLeft");
        });
       

    }

    getHomePage(main){
        //FIXING OF IRREGULAR APPLICATION OF DARK THEME
        this.view.backgroundMain.classList.contains("fullHeight")
         &&
        this.view.backgroundMain.classList.remove("fullHeight");
        
        //HIDE RESULTS
        this.view.searchResults.classList.remove("showFlex");

        //SHOW HOME
        main.classList.remove("hide");

        let {scrollToTop} = this.helpers()

        let childrenGreaterThanOne = ([...this.select(`${main.tagName.toLowerCase()}>*`, "all")].length>1) && true;

        childrenGreaterThanOne && scrollToTop();


    }

   

    // //SEARCH RESULTS
    // searchResults(searchInput){
    //     let {titleVideoImageInfo, numResults} = this.helpers();
    //     let {titles, videos, images, channelNames, durations} = titleVideoImageInfo(searchInput);

    //     titles = numResults(titles, 5);
    //     videos = numResults(videos, 5);
    //     images = numResults(images, 5);
    //     channelNames = numResults(channelNames, 5);
    //     durations = numResults(durations, 5);

        

    //     return {titles, videos, images, channelNames, durations};
    // }

    //HELPER METHODS
    helpers(){

        // //TITLE, VIDEO LINK AND PROFILE PICTURE
        // function titleVideoImageInfo(searchInput){
        //     if(!searchInput) return null;

        //     axios.get("endpoint")
        //     .then(({apiTitles:titles,

        //           apiVideos:videos,

        //           apiImages:images,

        //           apiChannelNames:channelNames,

        //           apiDurations:durations})=>{

        //         return {titles, videos, images, channelNames, durations}
        //     })
        //     .catch(error=>{
        //         console.log(`Error in getting titles, videos and images: ${error.message}`)
        //     })

        // }

        //SCROLL TO TOP
        function scrollToTop(){
            document.body.scrollToTop = 0;// Works only on Safari
            document.documentElement.scrollTop = 0;//Works For Chrome, Firefox, IE and Opera
        }

        //GET A SPECIFIC NUMBER OF RESULTS
    //     function numResults(resArray, num){
            
    //         let finalResultsArray = [];
    //         for(let i=0; i<num; i++){
    //             finalResultsArray.push(resArray[i])
    //         }

    //         return finalResultsArray;

    //     }

        //HELPER PUBLIC API INTERFACE
        return {
            // titleVideoImageInfo,
            // numResults,
            scrollToTop
        }
    }
    

}



//SETUP
window.addEventListener("DOMContentLoaded", function(){
    let controller = new Controller();
    let view = new View(controller);
    controller.initialize(view);

});
    </script>
</html>

5. Youtube Clone with Shorts Player

Made by I Am Rochie. Fully functional css YouTube clone with shorts player. The clone is for mobile devices. Source

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>   
       <title> Youtube Clone </title>
    <!-- Special thanks to: Mitali di 🤗
                          : Shiva bro 🐒
                          : Brave coder
                          : Ayush 
                          : Mr.Fusion 
    for giving permission to add their yt channel in this clone code 💕 --> 
   <!-- All video thumbnail credits gose to thier owner --> 
  <!-- Shorts video credit: Ma Creationss
                          : Music World -->
  <!-- Copy for Educational Purpose only -->
  <style>
      
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

#Contains_all{
  display: none;
}

#loader_img{
  width: 100%;
  display: block;
}

header , #header{
  width: 100vw;
  height: 50px;
  background-color: #fff;
}

.yt_logo{
  width: 120px;
  height: 40px;
  margin: 5px 0 5px 5px;
}

.account_img{
  width: 30px;
  height: 30px;
  float: right;
  border-radius:50%;
  margin: 10px 15px 10px 10px;
}

.search_icon{
  width: 20px;
  height: 20px;
  float: right;
  margin: 15px 10px 15px 10px;
}

.notification_icon{
  width: 20px;
  height: 20px;
  float: right;
  margin: 15px 10px 15px 10px;
}

.cast_icon{
  width: 25px;
  height: 25px;
  float: right;
  margin: 12.5px 10px 12.5px 10px;
}

#hr { 
  border: 0; 
  border-top: 1px solid lightgray;
  margin: 0; 
}

#Explore_box{
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 10px 10px -15px #181818;   
  display:flex;
  overflow-y:hidden;
  overflow-x:scroll;
  position: relative;
  z-index: 6;
}

.explore_bar{
  min-width: 90px;
  height: 35px;
  margin: 7.5px 12px 7.5px 10px;
  border-radius:2px;
  background-color: #e4e4e4;
}

.explore_icon{
  width: 22px;
  height: 22px;
  margin: 6.5px 0 6.5px 10px;
}

.explore_text{
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  margin: 0;
  margin-top: -27px;
  margin-left: 38px;
}

.vertical_hr{
  min-width: 1px;
  height: 35px;
  background-color: lightgray;
  margin: 7.5px 5px 7.5px 2px;
}

#all , #music , #coding , #instrumental_cover , #facts , #music_style{
  min-width: 40px;
  height: 35px;
  background-color: #606060;
  margin: 7.5px 6px 7.5px 5px;
  border-radius: 35px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  color: #f2f2f2;
}

#all b{
  display: block;
  margin: 12px 0 5px 12px; 
}

#music , #coding , #instrumental_cover , #facts , #music_style{
  min-width: 62px;
  height: 35px;
  background-color: #f2f2f2;
  color: #606060;
  border: 1.5px solid #dddddd;
}

#music b{
  display: block;
  margin: 12px 0 5px 15px; 
}

#coding{
  min-width: 68px;
  height: 35px;
}

#coding b{
  display: block;
  margin: 12px 0 5px 15px; 
}

#instrumental_cover{
  min-width: 135px;
  height: -35px;
}

#instrumental_cover b{
  display: block;
  margin: 12px 0 5px 15px; 
}

#facts{
  min-width: 60px;
  height: 35px;
}

#facts b{
  display: block;
  margin: 12px 0 5px 15px;
}

#music_style{
  min-width: 92px;
  height: 35px;
}

#music_style b{
  display: block;
  margin: 12px 0 5px 15px; 
}

.send_feedback{
  display: block;
  min-width: 120px;
  height: 50px;
}

.send_feedback h4{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  margin-top: 18px;
  margin-left: 8px;
  color: #004992;
}

#profile{
  width: 25px;
  height: 25px;
  border-radius:50%;
  background-color:darkseagreen;
  float:right;
  margin: 30px;
}

#profile_bar{
  display:none;
  width:100%;
  height:630px;
  position: absolute;
  top: 0px;
  background-color: skyblue;
  animation-name: profile_bar;
  animation-duration: .4s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  z-index: 7;
}

@keyframes profile_bar{
  0%{
    opacity: .2;
    top:300px;
  }
  100%{
    opacity: 1;
    top:0px;
  }
}

.close_bar{
  width:100%;
  height:50px; 
  background-color: #fff;
  position: fixed;
}

.close_box{
  width: 50px;
  height:50px;
  margin-left: 5px;
}

#close_arrow_1 , #close_arrow_2{
  width:1px;
  height:28px;
  background-color: #606060;
  transform: rotate(-45deg);
  position: relative;
  top: 10px;
  left: 24px;
}

#close_arrow_2{
  transform: rotate(45deg);
  position: relative;
  top: -18px;
}

.profile_box_1{
  width: 100%;
  height: 235px;
  background-color: #fff;
}

.extra_space{
  width:100%;
  height:50px; 
  background-color: transparent;
}

.account_img_2{
  width: 35px;
  height: 35px;
  border-radius:50%;
  margin: 30px 0 0 25px;
}

.account_name , .email_id{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #121212;
  margin-top:-35px;
  margin-left: 80px;
}

.email_id{
  margin-top: -16px;
}

.right_arrow{
  width: 14px;
  height: 14px;
  margin-top: -44px;
  float: right;
  margin-right: 30px;
}

.manage_id_text{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #004992;
  margin-top: -6px;
  margin-left: 80px;
}

.incognito_icon{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 25px;
}

.incognito_text , .add_account_text , .your_channel_text , .yt_studio_text , .time_watched_text , .yt_premium_text , .dollar_text , .personal_data_text , .settings_text , .help_text{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #121212;
  margin-top: -20px;
  margin-left: 76px;
}

.add_account{
  width: 18px;
  height: 18px;
  margin: 5px 0 0 25px;
}

.add_account_text , .your_channel_text{
  margin-top: -18px;
}

hr { 
  border: 0; 
  border-top: 1px solid lightgray;
  margin: 0; 
}

.profile_box_2{
  width: 100%;
  height:285px;
  background-color: #fff;
}
      /*  2nd profile_box */
      
.your_channel , .settings_icon{
  width: 18px;
  height:18px;
  margin: 16px 0 0 25px;
}

.yt_studio{
  width: 20px;
  height: 22px;
  margin: 6px 0 0 25px;
}

.share_icon{
  width: 20px;
  height:20px;
  position: relative;
  top: -38px;
  float: right;
  margin-right: 30px;
}

.time_watched{
  width: 18px;
  height: 18px;
  margin: 10px 0 0 25px;
}

.yt_premium_icon , .dollar_icon , .help_icon{
  width: 20px;
  height: 20px;
  margin: 10px 0 0 25px;
}

.personal_data{
  width: 22px;
  height: 18px;
  margin: 10px 0 0 24px;
}

          /* 3rd profile_box */

.profile_box_3{
  width: 100%;
  height:100px;
  background-color: #fff;
}

.help_icon{
  margin: 8px 0 0 25px;
}

.profile_bottom_box{
  width: 100%;
  height: 25px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left:0;
}

.privacy_policy{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  margin-top: 7.5px;
  text-align: center;
}

#bottom_container{
  width: 100%;
  height:50px;
  Background-color: #fff;
  position: fixed;
  bottom:0;
  z-index: 9;
}

#Home , #Shorts , #Upload , #Subscription , #Library{
  width: 20%;
  height: 50px;
  background-color: #fff;
  display: grid;
  place-items: center;
}

.home_icon{
  width: 20px;
  height: 20px;
  margin-top: 8px;
}

.category_text{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  top:-15px;
}

#Shorts{
  margin-top:-50px;
  margin-left: 20%;
}

.yt_shorts_icon{
  width: 16px;
  height: 20px;
  margin-top: 8px;
}

#Upload{
  margin-top: -50px;
  margin-left: 40%;
}

.upload_icon{
  width: 34px;
  height: 34px;
  margin:8px 0 6px 0;
}

#Subscription{
  margin-top: -50px;
  margin-left: 60%;
}

.subscription_icon{
  width: 28px;
  height:28px;
  margin-top: 6px;
  margin-left: 2px;
}

#Subscription .category_text{
  top: -21px;
}

#Library{
  margin-top: -50px;
  margin-left: 80%;
}

     /* inside search */
     
#search_box{
  display: none;
}

#search_box header{
  width: 100vw;
  height: 50px;
  background-color: #fff;
  position: fixed;
  z-index: 1;
}

.left_arrow_icon{
  width: 24px;
  height: 24px;
  margin: 15px 10px 13px 12px;
  transform: rotate(180deg);
  opacity: .8;
}

.small_search_box{
  width: 75%;
  height: 30px;
  border-radius: 4px;
  background-color: transparent;
  position: relative;
  top: -50px;
  left: 12.5%;
}

.small_search_box input{
  width: 95%;
  height: 40px;
  border: none;
  outline: none;
  background-color: #f2f2f2;
  border-radius: 4px;
  padding-left: 10px;
}

::placeholder{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  padding: 4px 0 0 10px ;
  color: #606060;
}

.voice_search_box{
  width: 30px;
  height:30px;
  background-color: #f2f2f2;
  border-radius: 50%;
  float: right;
  margin-top: -75px;
  margin-right: 10px;
}

.voice_search_icon{
  display: block;
  width: 18px;
  height:20px;
  margin: 5px 6px;
}

/* search history */

.Search_history_box{
  width: 100%;
  height:680px;
  background-color: #fff;
  animation-name: Search_history_box;
  animation-duration: .4s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  z-index:-1;
}

@keyframes Search_history_box{
  0%{
    opacity: .6;
    padding-top: 50px; 
  }
  100%{
    opacity: 1;
    padding-top: 0;
  }
}

.recent_search_icon , .recent_search_icon_2{
  width: 26px;
  height: 26px;
  margin-top: 70px;
  margin-left: 15px;
}

.recent_search_icon_2{
  margin-top: 4px;
}

.recent_search_text{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin-top: -25px;
  margin-left: 65px;
}

.copy_it_icon{
  width: 16px;
  height: 16px;
  margin-top: -40px;
  float: right;
  margin-right: 25px; 
}

/* Home setup */

#Home_box{
  width: 100%;
  height: 700px;
  background-color: skyblue;
}

/* Subscription box setup */

#Subscription_box{
  display:none;
  width: 100%;
  background-color: transparent;
}

#channels_box{
  width: 100%;
  height: 100px;
  background-color: #fff;
  display:flex;
  overflow-y:hidden;
  overflow-x:scroll;
}

#channel_cover_1 , #channel_cover_2 , #channel_cover_3 , #channel_cover_4 , #channel_cover_5 , #channel_cover_6 , #channel_cover_7 , #channel_cover_8{
  min-width: 90px;
  height: 100px;
  background-color: #fff;
  display: flex;
}

.channel_dp{
  min-width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 8px 10px 5px 10px;
}

.channel_name , .channel_name_3 , .channel_name_5 , .channel_name_8{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  color: #121212;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
  margin: 85px 0 0 0;
  margin-left:-78px;
  overflow: hidden;
  white-space: nowrap;
  min-width:70px;
}

.channel_name_3 , .channel_name_5{
  margin-left: -80px;
  min-width: 65px;
}

.channel_name_8{
  margin-left: -72px;
}

.ghost_channel{
  min-width: 60px;
  height: 100px;
  background-color: #fff;
}

#All_channel{
  width: 60px;
  height: 100px;
  background-color: #fff;
  display: grid;
  place-items: center;
  float: right;
  margin-top: -100px;
  z-index: 1;
  position: relative;
}

.all_channel{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight:900;
  color: #004992;
  margin: auto;
}

#Subscription_all , #Subscription_today , #Subscription_cont , #Subscription_unwatched , #Subscription_live , #Subscription_posts{
  min-width: 40px;
  height: 35px;
  background-color: #606060;
  margin: 7.5px 6px 7.5px 8px;
  border-radius: 35px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  color: whitesmoke;
}

#Subscription_all b{
  display: block;
  margin: 12px 0 5px 12px; 
}

#Subscription_today , #Subscription_cont , #Subscription_unwatched , #Subscription_live , #Subscription_posts{
  min-width: 62px;
  height: 32px;
  margin: 7.5px 6px 7.5px 6px;
  background-color: #f2f2f2;
  color: #606060;
  border: 1.5px solid #dddddd;
}

#Subscription_today b{
  display:block;
  margin: 10px 0 5px 15px;
}

#Subscription_cont{
  min-width: 128px;
}

#Subscription_cont b , #Subscription_unwatched b , #Subscription_live b , #Subscription_posts b{
  display:block;
  margin: 10px 0 5px 12px;
}

#Subscription_unwatched{
  min-width: 85px;
}

#Subscription_live{
  min-width: 45px;
}

#Subscription_posts{
  min-width: 55px;
}

#Subscription_settings{
  display: block;
  min-width: 78px;
  height: 50px;
}

#Subscription_settings h4{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  margin-top: 18px;
  margin-left: 8px;
  color: #004992;
}

/* View channel */

#view_channel{
  width: 100vw;
  height: 40px;
  background-color: #fff;
  display: none;
}

#view_channel h2{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  float: right;
  margin: 0;
  margin-top: 14px;
  margin-right: 14px;
  color: #367fbf;
}

/* Video box */

.video_box , #video_box_1 , #video_box_2 , #video_box_3 , #video_box_4 , #video_box_5 , #video_box_6 , #video_box_7 , #video_box_8 , #video_box_9 , #video_box_10 , #video_box_11 , #video_box_12 , #video_box_13{
  width: 100%;
  height: 270px;
  background-color: #fff;
  position: relative;
  z-index:5;
}

#empty_box{
  width: 100%;
  height: 270px;
  display: none;
  place-items: center;
}

#empty_box img{
  width: 30%;
}

#empty_box h4{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #004992;
  text-align: center;
  margin: 0 10%; 
  margin-top: -85px;
}

.video_thumbnail{
  width: 100%;
  height: 76%;
}

.channel_icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 8px 0 0 12px;
}

.video_name{
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  color: #121212;
  margin: 0;
  margin-left: 62px;
  margin-top: -44px;
}

.video_details{
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  color: #606060;
  margin: 0;
  margin-top: 4px;
  margin-left: 62px;
}

.three_dot_icon{
  display:block;
  width:14px;
  height:14px;
  margin: 0;
  margin-top: -45px;
  float: right;
  margin-right: 10px;
  opacity: .6;
}

/* Library setup */

#Library_box{
  display: none;
  width: 100%;
  height: 630px;
}

#Library_box h5{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  margin: 0;
  display: block;
  padding: 15px 0 10px 15px;
  color: #36454f;
}

.history_vid{
  width: 100%;
  height: 138px;
  display:flex;
  overflow-y:hidden;
  overflow-x:scroll;
}

.small_vid_box , .small_vid_last_box{
  min-width: 150px;
  height: 132px;
  margin-left: 15px;
}

.small_vid_last_box{
  padding-right: 15px;
}

.small_vid_thumbnail{
  width: 100%;
  height: 65%;
  border-bottom: 3px solid #ff0000;
}

.library_three_dot_icon{
  width: 12px;
  height:12px;
  margin:0;
  float: right;
  margin-right:-2px;
}

.vid_name{
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width:130px;
  position: relative;
  top: -24px;
  left:5px;
}

.chnl_name{
  font-size: 10px;
  font-family: 'Roboto', sans-serif;
  color: #36454f;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width:110px;
  position: relative;
  top: -48px;
  left:5px;
}

#Library_box hr{
  border: 0; 
  border-top: 1px solid lightgray;
  margin: 0; 
  margin-top: 12px;
}

.history_icon , .your_vid_icon , .download_icon , .your_movies_icon , .watch_later_icon , .plus_icon , .liked_videos_icon{
  width: 28px;
  height: 28px;
  margin:  20px 0 0 20px;
}

.your_vid_icon{
  width: 24px;
  height: 24px;
  margin: 18px 0 0 22px;
}

.download_icon , .watch_later_icon{
  width: 22px;
  height: 22px;
  margin: 18px 0 0 22px;
}

.your_movies_icon{
  margin: 0 0 0 20px;
}

.plus_icon{
  margin-top: 16px;
}

.liked_videos_icon{
  width: 45px;
  height: 33.8px;
}

#Library_box .text{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  margin-top: -38px;
  margin-left:58px;
}

#Library_box .text_2{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  margin-top: -42px;
  margin-left:58px;
}

#Library_box .text_3 , .text_6{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #36454f;
  margin-top: -10px;
  margin-left:75px;
}

#Library_box .text_4{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  margin-top: -38px;
  margin-left:58px;
  color: deepskyblue;
}

#Library_box .text_5{
  display: block;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  color: #36454f;
  margin-top: -48px;
  margin-left:75px;
}

.text_6{
  margin-left:90px;
}

.download_completed_icon{
  width: 22px;
  height: 22px;
  float: right;
  margin-right: 20px;
  margin-top: -48px;
}

.down_arrow_icon{
  width: 12px;
  height: 12px;
  display: block;
  margin: 0;
  margin-top: -24px;
  float: right;
  margin-right: 20px;
}

.A_z{
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  margin:0;
  margin-top: -24px;
  float: right;
  margin-right: 40px;
}

/* beta shorts features */

.beta_shorts_outer_box{
  width: 100%;
  height: 320px;
}

.beta_shorts_icon{
  width: 20px;
  height: 25px;
  margin-top: 12px;
  margin-left: 15px;
}

.beta_shorts_text{
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  margin-left: 44px;
  margin-top: -24px;
}

.beta_text{
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #36454f;
  margin-left: 90px;
  margin-top: -34px;
}

.beta_shorts_box{
  width: 100%;
  height: 270px;
  display:flex;
  overflow-y:hidden;
  overflow-x:scroll;
  margin-top: -10px;
}

.beta_shorts_box .three_dot_icon{
  width: 14px;
  height:14px;
  float: right;
  margin-right: 8px;
  margin-top:10px;
}

.beta_shorts_1 , .beta_shorts_2 , .beta_shorts_3 , .beta_shorts_4 , .beta_shorts_5{
  min-width: 145px;
  height: 250px;
  margin: 10px 0 0 15px;
  border-radius: 8px;
  background: url('https://i.ibb.co/SfF9M4z/Techno-gamerz-op.jpg');
  background-size: cover;
}

.beta_shorts_2{
  background-image: url('https://i.ibb.co/MVXYYNc/Army-background.jpg');
}

.beta_shorts_3{
  background-image: url('https://i.ibb.co/fdFnb1n/Girl-background.jpg');
}

.beta_shorts_4{
  background-image: url('https://i.ibb.co/ry6QGxj/Mahakal-background.jpg');
}

.beta_shorts_5{
  background-image: url('https://i.ibb.co/DVxBvtH/Carry-background.jpg');
}

.beta_shorts_name , .beta_shorts_name_black{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
  text-align: left;
  margin: 0;
  padding: 195px 5px 5px 10px; 
}

.beta_shorts_name_black{
  color: #000;
}

.beta_shorts_views , .beta_shorts_views_black{
  font-size: 11px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
  text-align: left;
  margin: 0;
  padding: 0 0 0 8px;
}

.beta_shorts_views_black{
  color:#000;
}

.beta_shorts_extra_space{
  min-width: 15px;
  height: 100px;
  background-color: transparent;
}

/* shorts setup */

#shorts_box{
  width: 100%;
  height: 100vh;
  background-color: #000;
  display:none;/*
  background-image: url('https://www.dropbox.com/s/uc4r3ygg5h7o458/tujhe%20sochta%20hoon%20%5Bfemale_version%5D.mp4?raw=1');*/
}

video{
  width: 100vw;
  height: 100vh;
}


#box{
  width: 100%;
  height:100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; 
  position: relative;
  z-index: 1;
}

/* Video box for videos */
.vid_1 , .vid_2 , .vid_3 , .vid_4 , .vid_5 , .vid_6 , .vid_7 , .vid_8 , .vid_9 , .vid_10 , .vid_11, .vid_12{
  height: 100vh;
  min-width:100%;
  background-color: black;
  scroll-snap-align: start;
}

video{
  width: 100%;
  height: 100%;
}

.back_arrow{
  width: 20px;
  height: 20px;
  position: fixed;
  top: 25px;
  left: 25px;
}

.shorts_channel_dp{
  width: 30px;
  height: 30px;
  border-radius:50%;
  margin-left: 15px;
  position: relative;
  bottom: 50px;
}

.shorts_channel_name{
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #fff;
  margin-left: 55px;
  position: relative;
  bottom: 88px;
}

.sub_btn{
  width: 85px;
  height: 22px;
  background-color: #ff0000;
  border-radius:2px;
  position: relative;
  bottom:122px;
  left: 130px;
}

.sub_text{
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  padding:4px 0 0 12px;
}

.shorts_name{
  font-size:14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  margin-left: 20px;
  color: #fff;
  position: relative;
  bottom: 240px;
}

.sound_box{
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background-color: #36454f;
  border: 1.5px solid #fff;
  position: relative;
  bottom: 240px;
  left: 84vw;
}

.sound_bar_1 , .sound_bar_2 , .sound_bar_3 , .sound_bar_4 , .sound_bar_5{
  width: 2px;
  height: 6px;
  background-color: #f2f2f2;
  border-radius:2px;
  position: relative;
  top:17px;
  left: 8px;
  animation-name: bar_1;
  animation-duration: 2.2s;
  animation-iteration-count:infinite;
  animation-timing-function:initial;
}

.sound_bar_2{
  height: 16px;
  top: 6px;
  left:12.5px;
  animation-name: bar_2;
}

.sound_bar_3{
  height: 24px;
  left: 17px;
  top:-14px;
  animation-name: bar_3;
}

.sound_bar_4{
  height: 16px;
  left: 21.5px;
  top: -34px;
  animation-name: bar_4;
}

.sound_bar_5{
  height: 6px;
  left: 26px;
  top: -45px;
  animation-name: bar_5;
}

@keyframes bar_1 {
  0%{
    top: 17px;
    height: 4px;
  }
  50%{
    top: 6px;
    height: 24px;
  }
  100%{
    top: 17px;
    height: 4px;
  }
}

@keyframes bar_2 {
  0%{
    top: 6px;
    height: 16px;
  }
  50%{
    top: -11px;
    height: 12px;
  }
  100%{
    top: 6px;
    height: 16px;
  }
}

@keyframes bar_3 {
  0%{
    top: -14px;
    height: 24px;
  }
  50%{
    top: -20px;
    height: 6px;
  }
  100%{
    top: -14px;
    height: 24px;
  }
}

@keyframes bar_4 {
  0%{
    top: -34px;
    height: 16px;
  }
  50%{
    top: -29px;
    height: 12px;
  }
  100%{
    top: -34px;
    height: 16px;
  }
}

@keyframes bar_5 {
  0%{
    top: -45px;
    height: 6px;
  }
  50%{
    top: -48px;
    height: 24px;
  }
  100%{
    top: -45px;
    height: 6px;
  }
}

.share_text , .num_of_comment , .dislike_text , .num_of_like{
  font-size:14px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  margin-left: 85vw;
  position: relative;
  bottom: 345px;
}

.num_of_comment{
  bottom: 485px;
  margin-left: 88vw;
}

.dislike_text{
  bottom: 635px;
  margin-left: 84vw;
}

.num_of_like{
  bottom:780px;
  margin-left: 87vw;
}

.shorts_share_icon , .Comments_icon , .dislike_icon , .like_icon , .extra_stuff_icon{
  width: 28px;
  height: 28px;
  margin-left: 86vw;
  position: relative;
  bottom: 410px;
}

.Comments_icon{
  width: 30px;
  height: 30px;
  bottom: 555px;
}

.dislike_icon{
  bottom: 705px;
  transform: rotate(180deg);
}

.like_icon{
  bottom:850px;
}

.extra_stuff_icon{
  width: 26px;
  height: 26px;
  bottom: 920px;
  margin-left: 86vw;
}

      </style>
</head>

<body onload="page_loaded()">
  
  <img src="https://i.ibb.co/7JrVbCB/Yt-opening-screen.png" id="loader_img">
  
  
  <!-- To add loader -->
  <div id="Contains_all">
  
   <!--  Div for cover all tags & elements to make it's display:none; to add search feature -->
 <div id="Cover_search">
   
  <!-- Top header -->
  
  <header id="header">
   
    <img src="https://i.ibb.co/yW8XJgC/You-Tube-logo.png" class="yt_logo">
    <img src="https://i.ibb.co/L5jhxVv/Account-img.jpg" class="account_img" onclick="open_profile()">
    <img src="https://i.ibb.co/m0my0rt/Search-icon.png" class="search_icon" onclick="open_search_bar()">
    <img src="https://i.ibb.co/9ngMMh6/Notification-icon.png" class="notification_icon">
    <img src="https://i.ibb.co/ynzpghQ/Cast-icon-svg.png" class="cast_icon"> 
    
  </header> <hr id="hr">
  
  <!-- End Top header -->
  
  <!-- Explore and suggestions box -->
  
  <div id="Explore_box">
    <div class="explore_bar">
      <img src="https://i.ibb.co/R4k9GDY/11457116761551938541-512.png" class="explore_icon"> 
      <h5 class="explore_text"> Explore </h5>
    </div>
    <div class="vertical_hr"></div>
    <div id="all"> <b> All </b> </div>
    <div id="music"> <b> Music </b> </div>
    <div id="coding"> <b> Coding </b> </div>
    <div id="instrumental_cover">
      <b> Instrumental Cover </b>
    </div>
    <div id="facts"> <b> Facts </b> </div>
    <div id="music_style">
      <b> Music Style </b>
    </div>
    <div class="send_feedback">
      <h4> Send Feedback </h4>
    </div>
  </div>
  
  <!-- End Explore and suggestions box -->
  
  <div id="profile_bar">
    <div class="close_bar">
      <div class="close_box" onclick="close_profile()">
        <div id="close_arrow_1" onclick="close_profile()"></div>
        <div id="close_arrow_2" onclick="close_profile()"></div>
      </div>
    </div>
    <div class="profile_box_1">
      <div class="extra_space"></div>
      <img src="https://i.ibb.co/L5jhxVv/Account-img.jpg" class="account_img_2">
      <h4 class="account_name"> Arohi Chatterjee </h4>
      <h4 class="email_id"> [email protected] </h4>
      <img src="https://i.ibb.co/qYJpwr9/Right-arrow.png" class="right_arrow">
      <h4 class="manage_id_text"> 
        Manage your Google Account 
      </h4>
      <img src="https://i.ibb.co/5TGwPZ6/Incog.png" class="incognito_icon">
      <h4 class="incognito_text"> 
        Turn on Incognito 
      </h4>
      <img src="https://i.ibb.co/4ptwK54/Add-account.png" class="add_account">
      <h4 class="add_account_text"> Add account </h4>
    </div> <hr>
    
    <div class="profile_box_2">
      <img src="https://i.ibb.co/GxpjKw8/Your-channel.png" class="your_channel">
      <h4 class="your_channel_text"> Your channel </h4>
      <img src="https://i.ibb.co/wrxvXmn/Yt-studio.png" class="yt_studio">
      <h4 class="yt_studio_text"> YouTube Studio </h4>
      <img src="https://i.ibb.co/QCF8DZq/Share-icon.png" class="share_icon">
      <img src="https://i.ibb.co/JvFH8xf/Time-watched.png" class="time_watched">
      <h4 class="time_watched_text"> Time watched </h4>
      <img src="https://i.ibb.co/vjPnfbs/Yt-premium-icon.png" class="yt_premium_icon">
      <h4 class="yt_premium_text"> 
        Get YouTube Premium
      </h4>
      <img src="https://i.ibb.co/4swSmdy/Dollar-icon.png" class="dollar_icon">
      <h4 class="dollar_text"> 
        Purchases and membershis
      </h4>
      <img src="https://i.ibb.co/DgNHz93/Personal-data.png" class="personal_data">
      <h4 class="personal_data_text"> 
        Your data in YouTube
      </h4>
    </div>  <hr>
    <div class="profile_box_3">
      <img src="https://i.ibb.co/BGCK80x/Settings-icon.png" class="settings_icon">
      <h4 class="settings_text"> Settings </h4>
      <img src="https://i.ibb.co/DCvGbG4/Help-icon.png" class="help_icon">
      <h4 class="help_text"> Help and feedback </h4>
    </div>
    
    <div class="profile_bottom_box">
      <h5 class="privacy_policy"> 
        Privacy Policy • Terms of Service
      </h5>
    </div>
  </div>

  <!-- Footer / bottom containee -->
  <div id="bottom_container">
    <div id="Home" onclick="open_home()">
      <img src="https://i.ibb.co/0FGPPds/Home-icon.png" class="home_icon">
      <h5 class="category_text"> Home </h5>
    </div>
    <div id="Shorts" onclick="open_shorts()">
      <img src="https://i.ibb.co/dKgJT0b/Yt-shorts-icon.png" class="yt_shorts_icon">
      <h5 class="category_text"> Shorts </h5>
    </div>
    <div id="Upload">
      <img src="https://i.ibb.co/M9rwFcj/Upload-icon.png" class="upload_icon" onclick="upload_icon()">
    </div>
    <div id="Subscription" onclick="open_subscription()">
      <img src="https://i.ibb.co/SvwyRFR/Subscription-icon.png" class="subscription_icon">
      <h5 class="category_text"> 
        Subscriptions 
      </h5>
    </div>
    <div id="Library" onclick="open_library()">
      <img src="https://i.ibb.co/5ckTtG8/Screenshot-20211003-110410-3.png" class="home_icon">
      <h5 class="category_text"> Library </h5>
    </div>
  </div>
  
 </div>
 
   <!-- To add search feature -->
   
 <div id="search_box">
   
   <header>
     <img src="https://i.ibb.co/0fqPxTn/Left-arrow-icon.png" class="left_arrow_icon" onclick="close_search_bar()">
     <div class="small_search_box">
       <input type="text" placeholder="Search YouTube">
     </div>
     <div class="voice_search_box">
       <img src="https://i.ibb.co/XCxbBN0/Voice-search-icon.png" class="voice_search_icon">
     </div>
   </header>
   
   <div class="Search_history_box">
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon">
     <h4 class="recent_search_text"> 
       Thapa Technical
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Coding Infinite
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       A2 Motivation {Arvind Arora}  
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       CodeWithHarry
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Coding Artist
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Linguamarina
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Online Tutorials
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Myindia
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Husain Sir
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Music Style
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       The Brave Coders
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Khudgharz Official
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="recent_search_icon_2">
     <h4 class="recent_search_text"> 
       Cyberpunk 2077 
     </h4>
     <img src="https://i.ibb.co/JRjdPy2/Copy-it-icon.png" class="copy_it_icon">
   
   </div>
  </div>
  
   <!-- End search feature -->
   
   
   <!-- Home setup -->
   
   <div id="Home_box">
    
       <!-- Video 1 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/60z6f43/Online-tutorials-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_icon">
      <h5 class="video_name"> 
        CSS Neumorphism Animation Effects | How <br> to make a Css Website Animation
      </h5>
      <h6 class="video_details"> 
        Online Tutorials • 14K views • 1 month ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 1 setup -->
       <!-- Video 2 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/ZzKmn1T/Pehchan-music-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/Z29NLtB/Pehchan-music-dp.jpg" class="channel_icon">
      <h5 class="video_name"> 
        Yo Jo Halka Halka Suroor Hai | Stebin Ben <br> Ft. Niti Taylor | Cover
      </h5>
      <h6 class="video_details"> 
        Pehchan Music • 14M views • 2 years ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 2 setup -->
       <!-- Video 3 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/qJp9nty/Linguamarina-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/cwwGrQT/Linguamarina-dp.jpg" class="channel_icon">
      <h5 class="video_name"> 
        50 common English phrase | to boost <br> your learning speed 
      </h5>
      <h6 class="video_details"> 
        linguamarina • 6.1M views • 3 years ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 3 setup -->
       <!-- Beta shorts feature -->
       <div class="beta_shorts_outer_box">
         
         <img src="https://i.ibb.co/dKgJT0b/Yt-shorts-icon.png" class="beta_shorts_icon">
         <h3 class="beta_shorts_text"> Shorts </h3>
         <h6 class="beta_text"> beta </h6>
         <div class="beta_shorts_box">
           <div class="beta_shorts_1">
            <img src="https://i.ibb.co/NLthjv3/White-Three-dot-icon.png" class="three_dot_icon">
             <p class="beta_shorts_name"> Techno Gamerz Rocking with Game On </p> 
             <p class="beta_shorts_views"> 
               596k views 
             </p>
           </div>
           <div class="beta_shorts_2">
            <img src="https://i.ibb.co/NLthjv3/White-Three-dot-icon.png" class="three_dot_icon">
             <p class="beta_shorts_name"> Soldiers on mission | #Respect for Army </p> 
             <p class="beta_shorts_views"> 
               76M views 
             </p>
           </div>
           <div class="beta_shorts_3">
            <img src="https://i.ibb.co/NLthjv3/White-Three-dot-icon.png" class="three_dot_icon">
             <p class="beta_shorts_name"> New girl hairstyle tutorial | Trending styles</p> 
             <p class="beta_shorts_views"> 
               17M views 
             </p>
           </div>
           <div class="beta_shorts_4">
            <img src="https://i.ibb.co/NLthjv3/White-Three-dot-icon.png" class="three_dot_icon">
             <p class="beta_shorts_name"> Bam Bhole - Laxmii [viruss] | Lord Shiva </p> 
             <p class="beta_shorts_views"> 
               139M views 
             </p>
           </div>
           <div class="beta_shorts_5">
            <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
             <p class="beta_shorts_name_black"> 5 Facts about Carry Minati - Ajay Nagar </p> 
             <p class="beta_shorts_views_black"> 
               12M views 
             </p>
           </div>
           <div class="beta_shorts_extra_space"></div>
         </div>
       </div>
       <!-- End Beta shorts feature -->
       <!-- Video 4 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/zrmYzDR/Coding-artist-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="channel_icon">
      <h5 class="video_name"> 
        Css Toaster Animation | Css Speed Art <br> Css Tutorials 
      </h5>
      <h6 class="video_details"> 
        Coding Artist • 7.2K views • 2 years ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 4 setup -->
       <!-- Video 5 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/MntMhby/Online-tutorials-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_icon">
      <h5 class="video_name"> 
        How to make Website using HTML <br> & CSS with Video Background 
      </h5>
      <h6 class="video_details"> 
        Online Tutorials • 35K views • 4 weeks ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 5 setup -->
       <!-- Video 6 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/NpPTHj4/Pehchan-music-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/Z29NLtB/Pehchan-music-dp.jpg" class="channel_icon">
      <h5 class="video_name"> 
         Aaj Din Chadeya - Unplugged Cover |<br> Namita  Choudhary | Love Aaj Kal
      </h5>
      <h6 class="video_details"> 
        Pehchan Music • 6.1M views • 3 years ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 6 setup -->
       <!-- Video 7 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/RgHbkYq/Thapa-technical-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/60F66V4/Thapa-technical-channel-icon.jpg" class="channel_icon">
      <h5 class="video_name"> 
        What will be the OUTPUT ????? Javascript <br> Unexpected Interview question 
      </h5>
      <h6 class="video_details"> 
        Thapa technical • 4.3K views • 1 weak ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 7 setup -->
       <!-- Video 8 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/jGG6Qdr/Duolingo-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/JmwnTXq/Duolingo-dp.jpg" class="channel_icon">
      <h5 class="video_name"> 
        Aprender uma língua é sofrido, então <br> deixamos divertido!
      </h5>
      <h6 class="video_details"> 
        Duolingo • 934K views • 9 montha ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 8 setup -->
       <!-- Video 9 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/6BVR9C9/Online-tutorials-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_icon">
      <h5 class="video_name">
        Top 20 Css & JavaScript effects preview <br> March 2020
      </h5>
      <h6 class="video_details"> 
        Online Tutorials • 976k views • 1 year ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 9 setup -->
       <!-- Video 10 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/cc6zvS9/Grand-singh-music-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/dfxGpxr/Grand-singh-music-icon.jpg" class="channel_icon">
      <h5 class="video_name"> 
        Duniya - Luka Chuppi piano cover <br> Akhil | Dhwani Bhanushali 
      </h5>
      <h6 class="video_details"> 
        Grand Singh Music • 16K views • 1 year ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 10 setup -->
       <!-- Video 11 setup -->
     <div class="video_box">
      <img src="https://i.ibb.co/tH6XvdR/Ringtone-bgm-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/dfxGpxr/Grand-singh-music-icon.jpg" class="channel_icon">
      <h5 class="video_name"> 
        I Love You | Bodyguard ft. Salmon boi | <br> Whatsapp status |💫 Ahestetic Status
      </h5>
      <h6 class="video_details"> 
        Ringi pingi 😜 • 232K views • 2 months ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 11 setup -->
     
     <div class="extra_space"></div>
     
   </div>
   
   <!-- End Home setup -->
   
   <!-- Shorts setup -->
   
   <div id="shorts_box">
     
  <div id="box">
   
   <div class="vid_1">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/o72o45bc30wbs0h/Khair_Mangda-Atif%20Aslam.png?raw=1">
     <source src="https://www.dropbox.com/s/acalnsfevgxqt42/khair-mangda-atif%20aslam.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Khair Mangda Main teri Rabba Se Yaara <br> #AtifAslam #StatusLover #LoveStatus <br> #MaCreationss
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon" onclick="close_shorts()">
    <p class="num_of_comment"> 63 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon" onclick="close_shorts()">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 52k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_2">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/eg8i9h9oor6gbsv/taare_ginn-dil_bechara.png?raw=1">
     <source src="https://www.dropbox.com/s/fd8cm2vs2l0drg3/taare_ginn-dil_bechara.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Taare Gin [Dil Bechara] <br> #SushantLover #MaCreationss #SSR <br> #30SecStatus
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 91 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 97k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_3">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/afcyr564ui2sx69/Shiv%20Tandav.png?raw=1">
     <source src="https://www.dropbox.com/s/b1h1tcksmlx2vkk/energetic%20shiv%20tandav.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPLEeXqBxuV3sOVysohtekBBNVbdUN92SDvw&usqp=CAU" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Music World 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Energetic Shiv Tandav Status <br> Status lover | #Mahakal #NightDotEffect <br> #30SecStatus
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 74 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 52k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   <!-- Working properly | Executed but not in use
   <div class="vid_4">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/0kbj3zkfa0of9ir/Rab%20Wangu.png?raw=1">
     <source src="https://www.dropbox.com/s/di82xbd8j4yerc5/rabb_wangu_.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow">
    <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Status Spreader
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Rab Wangu [ Jass Manak ] love status <br> #ManakIsLove #SharryNexus #Sikander2 <br> #Mera-Kalla-Kalla-Saah
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="share_icon">
    <p class="num_of_comment"> 76 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 86k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   --><!--  Working properly | Executed but not in use
   <div class="vid_5">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/komuvn8ot1rhm5b/tujhe%20sochta%20hoon.png?raw=1">
     <source src="https://www.dropbox.com/s/uc4r3ygg5h7o458/tujhe%20sochta%20hoon%20%5Bfemale_version%5D.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow">
    <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Music World 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Tujhe sochta hoon [ Female version ] <br> #Unplugged #FemaleSinger #Nostalgia <br> #Reverb
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="share_icon">
    <p class="num_of_comment"> 91 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 97k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   -->
   <div class="vid_6">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/tyu5vab9x0trufo/teri_aankho_mein-darshan%20raval.png?raw=1">
     <source src="https://www.dropbox.com/s/63hw5ydkn0xwyam/teri_aankho_mein-darshan%20raval.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Teri Aankhon Mein <br> #LoveStatus #DarshanRavaldz <br> #OpKakkar
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 36 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 51k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_7">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/clcl4itdmcpblh9/main_teri_ho_gayi-millind%20gaba.png?raw=1">
     <source src="https://www.dropbox.com/s/cp4dg99ssxoo35a/main_teri_ho_gayi-millind%20gaba.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Main Teri Ho gayi  <br> #GabaFan #MusicMG #trending <br> #SpeedRecords 
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 68 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 82k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_8">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/mof77ihneuo6ko6/yes_or_no-jass_manak.png?raw=1">
     <source src="https://www.dropbox.com/s/o8xzjzwhwdf9jpt/yes_or_no-jass_manak.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Yes or No [ Jass Manak ] <br> #ManakWorld #Closer #NoCompetition <br> #MaCreationss
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 37 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 34k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_9">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/pwic6qg7h6jmytd/feelings-sumit_goswami.png?raw=1">
     <source src="https://www.dropbox.com/s/a8yh6piu045yx74/feelings-sumit_goswami.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
       Feelings [ Sumit Goswami ] <br> #30SecStatus #LoveStatus #HaryanviOp <br> #LyricalStatus
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 71 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 78k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_10">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/t9h4f19are7iaz1/itni_si_baat_hai_%5Bvijay_devarakond_rashmika_mandanna%5D.png?raw=1">
     <source src="https://www.dropbox.com/s/klosyefirk4ljar/itni_si_baat_hai_%5Bvijay_devarakond_rashmika_mandanna%5D.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
      Itni si baat hai [ Vijay💚Reshmika ] <br> #MandanaLover #LoveStatus #ArijitFan <br> #MaCreationss
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 56 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 38k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_11">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/nd50qtc8bub69f6/butterfly-jass_manak.png?raw=1">
     <source src="https://www.dropbox.com/s/sjcxq9baoubqy1x/butterfly-jass_manak.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
      Butterfly [ Jass Manak ] <br> #ManakWorld #ManakIsLove #PunjabiOp <br> #MaCreationss
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 88 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 72k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
   <div class="vid_12">
    <video autoplay muted controls preload poster="https://www.dropbox.com/s/kvr24fp0g3764g5/sanam_teri_kasam-arijit_singh.png?raw=1">
     <source src="https://www.dropbox.com/s/pnq12qi1jm8v4dd/sanam_teri_kasam-arijit_singh.mp4?raw=1" type="video/mp4" />
    </video>
    <img src="https://i.ibb.co/vhnmJz7/Back-arrow.png" class="back_arrow" onclick="close_shorts()">
    <img src="https://i.ibb.co/fHtNkZX/Ma-creationss.jpg" class="shorts_channel_dp">
    <p class="shorts_channel_name">
      Ma Creations 
    </p>
    <div class="sub_btn">
      <h4 class="sub_text"> 
        Subscribe 
      </h4>
    </div>
    <h3 class="shorts_name">
      Sanam Teri Kasam | LoveStatus <br> #trending #Couple #ArijitFan <br> #MaCreationss
     </h3>
     <div class="sound_box">
       <div class="sound_bar_1"></div>
       <div class="sound_bar_2"></div>
       <div class="sound_bar_3"></div>
       <div class="sound_bar_4"></div>
       <div class="sound_bar_5"></div> 
    </div>
    <p class="share_text">
       Share 
    </p>
    <img src="https://i.ibb.co/mCKsFJ0/Share-icon.png" class="shorts_share_icon">
    <p class="num_of_comment"> 96 </p>
    <img src="https://i.ibb.co/3y953bS/Comment-icon.png" class="Comments_icon">
    <p class="dislike_text">
       Dislike
    </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="dislike_icon">
    <p class="num_of_like"> 98k </p>
    <img src="https://i.ibb.co/RbpRGLz/Like-dislike-icon.png" class="like_icon">
    <img src="https://i.ibb.co/rFtshxx/Extra-stuff-icon.png" class="extra_stuff_icon"> 
   </div>
   
 </div>
 
   </div>
   
   <!-- End shorts setup -->
   
   
   <!-- Subscription setup -->
   
   <div id="Subscription_box">
     <!-- Subscribed channel icon -->
     <div id="channels_box">
       <div id="channel_cover_1" onclick="thapa_technical()">
         <img src="https://i.ibb.co/60F66V4/Thapa-technical-channel-icon.jpg" class="channel_dp">
         <p class="channel_name"> Thapa Technical </p>
       </div>
       
       <div id="channel_cover_2" onclick="coding_artist()">
         <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="channel_dp">
         <p class="channel_name"> Coding Artist </p>
       </div>
       
       <div id="channel_cover_3" onclick="coding_infinite()">
         <img src="https://i.ibb.co/Sf5gyzv/Coding-infinite.jpg" class="channel_dp">
         <p class="channel_name_3"> Coding Infinite </p>
       </div>
       
       <div id="channel_cover_4" onclick="brave_coder()">
         <img src="https://i.ibb.co/8ggMBvZ/The-Brave-coder.jpg" class="channel_dp">
         <p class="channel_name"> The Brave coder </p>
       </div>
       
       <div id="channel_cover_5" onclick="ayush_codings()">
         <img src="https://i.ibb.co/GxW90Ck/Ayush-Codings.jpg" class="channel_dp">
         <p class="channel_name_5"> Ayush Codings </p>
       </div>
       
       <div id="channel_cover_6" onclick="online_tutorials()">
         <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_dp">
         <p class="channel_name"> Online Tutorials </p>
       </div> 
       
       <div id="channel_cover_7"  onclick="fusion_coder()">
         <img src="https://i.ibb.co/FX3HVcn/Mr-Fusion-Coder.jpg" class="channel_dp">
         <p class="channel_name"> Mr.FusionCoder </p>
       </div>
       
       <div id="channel_cover_8" onclick="fat_dino()">
         <img src="https://i.ibb.co/zsGnD10/Fat-dino.jpg" class="channel_dp">
         <p class="channel_name_8"> Fat Dino </p>
       </div>
       
       <div class="ghost_channel"></div>
       
     </div>
     
       <div id="All_channel"> 
         <p class="all_channel">
           ALL
         </p>
       </div>
       <!-- End subscribed channel icon -->
       <!-- Video filter box -->
     
     <div id="Explore_box">
       
       <div id="Subscription_all"> <b> All </b> </div>
       <div id="Subscription_today"> 
         <b> Today </b> 
       </div>
       <div id="Subscription_cont"> 
         <b> Continue watching </b> 
       </div>
       <div id="Subscription_unwatched"> 
         <b> Unwatched </b> 
       </div>
       <div id="Subscription_live"> 
         <b> Live </b> 
       </div>
       <div id="Subscription_posts"> 
         <b> Posts </b> 
       </div>
    <div id="Subscription_settings">
      <h4> Settings </h4>
    </div>
    
     </div>
     <header id="view_channel"> 
       <h2> VIEW CHANNEL </h2> 
     </header>
       <!-- End Video filter box -->
       <!-- Video 1 setup -->
     <div id="video_box_1">
      <img src="https://i.ibb.co/QrPcQ7X/Thapa-technical-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/60F66V4/Thapa-technical-channel-icon.jpg" class="channel_icon">
      <h5 class="video_name"> 
        Complete HTML and CSS Tutorial In One <br> Video In Hindi 2021
      </h5>
      <h6 class="video_details"> 
        Thapa technical • 434K views • 1 year ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 1 setup -->
       <!-- Video 2 setup -->
     <div id="video_box_2">
      <img src="https://i.ibb.co/q0dvQXW/Coding-Artist-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="channel_icon">
      <h5 class="video_name"> 
        Calculator Using HTML, CSS And Javascript <br> • With Source Code
      </h5>
      <h6 class="video_details"> 
        Coding Artist • 1.2K views • 3 days ago
      </h6>
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 2 setup -->
       <!-- Video 3 setup -->
     
     <div id="video_box_3">
      <img src="https://i.ibb.co/hMFqJFF/Coding-Artist-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/2Zy3Yk7/Coding-Artist.png" class="channel_icon">
      <h5 class="video_name">
        Create Custom Scrollbar Using CSS | <br>  Scrollbar CSS | CSS Tutorial
      </h5>
      <h6 class="video_details"> 
        Coding Artist • 48K views • 2 years ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 3 setup -->
       <!-- Video 4 setup -->
     
     <div id="video_box_4">
      <img src="https://i.ibb.co/MnhxFCb/Coding-Infinite-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/Sf5gyzv/Coding-infinite.jpg" class="channel_icon">
      <h5 class="video_name">
        Heart animation using html and css <br> • CSS Animation
      </h5>
      <h6 class="video_details"> 
        Coding Infinite • 987 views • 7 hours ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 4 setup -->
       <!-- Video 5 setup -->
     
     <div id="video_box_5">
      <img src="https://i.ibb.co/ftFCZ06/Coding-Infinite-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/Sf5gyzv/Coding-infinite.jpg" class="channel_icon">
      <h5 class="video_name">
        Animation Indian Flag using html and css <br> • CSS Animation
      </h5>
      <!-- Cyberpunk 2077 Reference -->
      <h6 class="video_details"> 
        Coding Infinite • 20.77k views • 1 month ago
      </h6>
      <!-- End Cyberpunk 2077 Reference -->
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 5 setup -->
       <!-- Video 6 setup -->
     
     <div id="video_box_6">
      <img src="https://i.ibb.co/JrLtmSk/Brave-coder-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/8ggMBvZ/The-Brave-coder.jpg" class="channel_icon">
      <h5 class="video_name">
        Simple Pure CSS Loader | Css Animation <br> HTML • CSS Tutorial
      </h5>
      <h6 class="video_details"> 
        The Brave Coders • 8k views • 2 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 6 setup -->
       <!-- Video 7 setup -->
     
     <div id="video_box_7">
      <img src="https://i.ibb.co/9w7Sf3w/The-brave-coders.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/8ggMBvZ/The-Brave-coder.jpg" class="channel_icon">
      <h5 class="video_name">
        Beautiful Profile Card | Css Animation <br> HTML • CSS Tutorial
      </h5>
      <h6 class="video_details"> 
        The Brave Coders • 21k views • 8 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
     <!-- No video found for Ayush Coding -->
     <div id="empty_box">
       <img src="https://i.ibb.co/X8Nj4B0/Packed-box.png">
       <h4> This channel has no longer available. Unsubscribe if  you'd like to remove it</h4>
     </div>
       <!-- End Video 7 setup -->
       <!-- Video 8 setup -->
     
     <div id="video_box_8">
      <img src="https://i.ibb.co/h7G4ccP/Online-tutorials-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_icon">
      <h5 class="video_name">
        CSS & JavaScript Background Animation <br> Effects • Image loop 
      </h5>
      <h6 class="video_details"> 
        Online Tutorials • 86k views • 8 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 8 setup -->
       <!-- Video 9 setup -->
     
     <div id="video_box_9">
      <img src="https://i.ibb.co/wMcXTy4/Online-tutorials-thumbnail.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/rZssjyX/Online-tutorials.jpg" class="channel_icon">
      <h5 class="video_name">
        Parallax Scrolling Website | How to Make <br> Website using Html CSS & Javascript
      </h5>
      <h6 class="video_details"> 
        Online Tutorials • 548k views • 5 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 9 setup -->
       <!-- Video 10 setup -->
     
     <div id="video_box_10">
      <img src="https://i.ibb.co/tcStDLj/Fusion-coder.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/FX3HVcn/Mr-Fusion-Coder.jpg" class="channel_icon">
      <h5 class="video_name">
        Sign Up Form | Using Html & Css • Form <br> Tutorial
      </h5>
      <h6 class="video_details"> 
        Mr. FusionCoder • 45k views • 4 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 10 setup -->
       <!-- Video 11 setup -->
     
     <div id="video_box_11">
      <img src="https://i.ibb.co/JsHpLyw/Fusion-coder.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/FX3HVcn/Mr-Fusion-Coder.jpg" class="channel_icon">
      <h5 class="video_name">
       What is Gradient in Css | CSS Tutorial by <br> FusionCoder
      </h5>
      <h6 class="video_details"> 
        Mr. FusionCoder • 53k views • 5 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 11 setup -->
       <!-- Video 12 setup -->
     
     <div id="video_box_12">
      <img src="https://i.ibb.co/jgK4HSp/Fat-dino.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/zsGnD10/Fat-dino.jpg" class="channel_icon">
      <h5 class="video_name">
        I Remade GTA: San Andreas Because <br> Rockstar  Wouldn't
      </h5>
      <h6 class="video_details"> 
        Fat Dino • 3.5M views • 5 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 12 setup -->
       <!-- Video 13 setup -->
     
     <div id="video_box_13">
      <img src="https://i.ibb.co/jJV9bkq/Fat-dino.jpg" class="video_thumbnail">
      
      <img src="https://i.ibb.co/zsGnD10/Fat-dino.jpg" class="channel_icon">
      <h5 class="video_name">
        I Made Among Us and it will DESTROY <br> your pc
      </h5>
      <h6 class="video_details"> 
        Fat Dino • 16M views • 11 months ago
      </h6>
      
      <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="three_dot_icon">
      
     </div>
       <!-- End Video 13 setup -->
     
     <div class="extra_space"></div>
     
   </div>
   
   <!-- End Subscription setup -->
   
   
   <!-- Library setup -->
   
   <div id="Library_box">
     <h5> Recent </h5>
     
     <div class="history_vid">
       <div class="small_vid_box">
         <img src="https://i.ibb.co/QrPcQ7X/Thapa-technical-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Complete HTML <br> and CSS Tutorial In One</h6>
         <h6 class="chnl_name"> Thapa technical </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/PDf3Wfs/Online-tutorials-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Glassmorphysm Login <br> Form using HTML and CSS </h6>
         <h6 class="chnl_name"> Online Tutorials </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/W2mnL1d/Pehchan-music-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Tum mile - Trishita Recs<br> | Unplugged Cover | </h6>
         <h6 class="chnl_name"> Pehchan Music </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/c3KCT7Q/Coding-artist-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Custom Icecream Maker <br> | Html, Css & Js | </h6>
         <h6 class="chnl_name"> Coding Artist </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/LQgJgPf/Online-tutorials-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> CSS 3D Isometric <br> Social Media Icon Effect </h6>
         <h6 class="chnl_name"> Online Tutorials </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/qkSLjmp/Pehchan-music-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Sang Hoon Tere | Vikaas <br> Shankar | Unplugged Cover | </h6>
         <h6 class="chnl_name"> Pehchan Music </h6>
       </div>
       
       <div class="small_vid_box">
         <img src="https://i.ibb.co/F7191KF/Codingnepal-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> 10 Best Js Projects for<br> Beginners [ Js Example ] </h6>
         <h6 class="chnl_name"> Codingnepal </h6>
       </div>
  <!-- Executed & working perfectly but not in use 
       <div class="small_vid_box">
         <img src="https://i.ibb.co/YWWZrL2/Coding-artist-thumbnail.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Css Sleeping Cat <br> Animation | Css Animation </h6>
         <h6 class="chnl_name"> Coding Artist </h6>
       </div>
       -->
       <!-- Cyberpunk 2077 Reference --> 
       
       <div class="small_vid_last_box">
         <img src="https://i.ibb.co/yF896bV/woman-in-cyberpunk-city-b-Gdobma-Um-Zqara-Wkp-JRm-Z21lr-Wxn-ZQ.jpg" class="small_vid_thumbnail">
         <img src="https://i.ibb.co/5TTkPRb/Three-dot-icon.png" class="library_three_dot_icon">
         <h6 class="vid_name"> Is 2077 similar to Cp 2077 <br> Cyberpunk For The Memes  </h6>
         <h6 class="chnl_name"> CP Reference </h6>
       </div>
       
     </div>
     
     <hr>
     
     <img src="https://i.ibb.co/zFTbFxt/Recent-search-icon.png" class="history_icon">
     <h5 class="text"> History </h5>
     
     <img src="https://i.ibb.co/F854LYh/Your-videos.png" class="your_vid_icon">
     <h5 class="text"> Your videos </h5>
     
     <img src="https://i.ibb.co/F4vF7LL/Download-icon.png" class="download_icon">
     <h5 class="text_2"> Downloads </h5>
     <h6 class="text_3"> 7 Videos </h6>
     <img src="https://i.ibb.co/HhGXdMY/Downloaded-icon.png" class="download_completed_icon">
     
     <img src="https://i.ibb.co/dbsdKKL/Your-movie-icon.png" class="your_movies_icon">
     <h5 class="text"> Your movies </h5>
     
     <img src="https://i.ibb.co/vVmR0tB/Watch-later-icon.png" class="watch_later_icon">
     <h5 class="text_2"> Watch later </h5>
     <h6 class="text_3"> 23 Unwatched videos </h6>
     
     <hr>
     
     <h5> Playlists </h5>
     <img src="https://i.ibb.co/jgbsQwZ/Down-arrow-icon.png" class="down_arrow_icon">
     <p class="A_z"> A-Z </p>
     <img src="https://i.ibb.co/1mZhjGy/Plus-icon.png" class="plus_icon">
     <h5 class="text_4"> New Playlist </h5>
     
     <img src="https://i.ibb.co/T0dJPX0/Likes-videos-icon.jpg" class="liked_videos_icon">
     <h5 class="text_5"> Liked videos </h5>
     <!-- Cyberpunk 2077 Reference -->
     <h6 class="text_6"> 2077 videos </h6>
     
     <div class="extra_space"></div>
   </div>
   
   <!-- end Library setup -->
   
   </div>
   
     <script>
 swal("Check Out", `🤗 Search bar 🤗
               🤗 Yt Channel 🤗
               🤗 Profile 🤗
               🤗 Yt Shorts 🤗
               🤗 Subscriptions 🤗
               🤗 Library 🤗
               🤗 And Comment your favourite 
               feature in comments section 🤗 ` ,"warning");
    </script> 

<script>
  // For loader 
  function page_loaded() {
    setTimeout(() => {
      document.getElementById('loader_img').style.display="none";
      document.getElementById('Contains_all').style.display="block";
    //  console.log('page loaded 😃')
    }, 2000);
  };
  

  function open_profile() {
    document.getElementById('profile_bar').style.display="block";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Home_box').style.display="none";
    document.getElementById('Subscription_box').style.display="none";
    document.getElementById('Library_box').style.display="none";
    document.getElementById('shorts_box').style.display="none";
  }
  
  function close_profile() {
    document.getElementById('profile_bar').style.display="none";
    document.getElementById('Explore_box').style.display="flex";
    document.getElementById('Home_box').style.display="block";
  }
  
  function open_search_bar() {
    document.getElementById('Cover_search').style.display="none";
    document.getElementById('Subscription_box').style.display="none";
    document.getElementById('Library_box').style.display="none";
    document.getElementById('search_box').style.display="block";
    document.getElementById('Home_box').style.display="none";
    document.getElementById('shorts_box').style.display="none";
    document.getElementById('profile_bar').style.display="none";
  }
  
  function close_search_bar() {
    document.getElementById('Cover_search').style.display="block";
    document.getElementById('Home_box').style.display="block";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Explore_box').style.display="flex";
    document.getElementById('hr').style.display="block";
  }
  
  function open_subscription() {
    document.getElementById('Subscription_box').style.display="block";
    
    document.getElementById('Explore_box').style.display="none";
    document.getElementById('hr').style.display="none";
    document.getElementById('Library_box').style.display="none";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Home_box').style.display="none";
    document.getElementById('shorts_box').style.display="none";
    document.getElementById('profile_bar').style.display="none";
  }
  
  
  function open_library() {
    document.getElementById('Library_box').style.display="block";
    
    document.getElementById('Explore_box').style.display="none";
    document.getElementById('hr').style.display="none";
    document.getElementById('Subscription_box').style.display="none";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Home_box').style.display="none";
    document.getElementById('shorts_box').style.display="none";
    document.getElementById('profile_bar').style.display="none";
  }
  
  function open_home() {
    document.getElementById('Home_box').style.display="block";
    
    document.getElementById('Explore_box').style.display="flex";
    document.getElementById('hr').style.display="none";
    document.getElementById('Subscription_box').style.display="none";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Library_box').style.display="none";
    document.getElementById('shorts_box').style.display="none";
    document.getElementById('profile_bar').style.display="none";
  }
  
  function open_shorts() {
    document.getElementById('shorts_box').style.display="block";
    
    document.getElementById('Explore_box').style.display="none";
    document.getElementById('bottom_container').style.display="none";
    document.getElementById('header').style.display="none";
    document.getElementById('hr').style.display="none";
    document.getElementById('Subscription_box').style.display="none";
    document.getElementById('search_box').style.display="none";
    document.getElementById('Library_box').style.display="none";
    document.getElementById('Home_box').style.display="none";
    document.getElementById('profile_bar').style.display="none";
  }
  
  function close_shorts() {
    document.getElementById('shorts_box').style.display="none";
    
    document.getElementById('Explore_box').style.display="flex";
    document.getElementById('Home_box').style.display="block";
    document.getElementById('bottom_container').style.display="block";
    document.getElementById('header').style.display="block";
    document.getElementById('hr').style.display="block";
  }
  
  // Updated to current version 
  // #Cyberpunk 2077 Reference 
  
  function upload_icon(){
    alert(`Information:
Uploading features are not available in current version.
Please Update it to version 2.0.77 
Current V: beta cP-1.3.1`);
  }
  
        // Making dark shade on other channels 
       //  Adding script for channels & video
   // to get exact video from a particular channel
  
  function thapa_technical(){
    document.getElementById('channel_cover_1').style.opacity="1";
    document.getElementById('channel_cover_1').style.backgroundColor="#def1ff";
    document.getElementById('video_box_1').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function coding_artist(){
    document.getElementById('channel_cover_2').style.opacity="1";
    document.getElementById('channel_cover_2').style.backgroundColor="#def1ff";
    document.getElementById('video_box_2').style.display = "block";
    document.getElementById('video_box_3').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function coding_infinite(){
    document.getElementById('channel_cover_3').style.opacity="1";
    document.getElementById('channel_cover_3').style.backgroundColor="#def1ff";
    document.getElementById('video_box_4').style.display = "block";
    document.getElementById('video_box_5').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function brave_coder(){
    document.getElementById('channel_cover_4').style.opacity="1";
    document.getElementById('channel_cover_4').style.backgroundColor="#def1ff";
    document.getElementById('video_box_6').style.display = "block";
    document.getElementById('video_box_7').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function ayush_codings(){
    document.getElementById('channel_cover_5').style.opacity="1";
    document.getElementById('channel_cover_5').style.backgroundColor="#def1ff";
    document.getElementById('view_channel').style.display = "none";
    document.getElementById('empty_box').style.display = "grid";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
  }
  
  function online_tutorials(){
    document.getElementById('channel_cover_6').style.opacity="1";
    document.getElementById('channel_cover_6').style.backgroundColor="#def1ff";
    document.getElementById('video_box_8').style.display = "block";
    document.getElementById('video_box_9').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function fusion_coder(){
    document.getElementById('channel_cover_7').style.opacity="1";
    document.getElementById('channel_cover_7').style.backgroundColor="#def1ff";
    document.getElementById('video_box_10').style.display = "block"; 
    document.getElementById('video_box_11').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    document.getElementById('channel_cover_8').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('video_box_12').style.display = "none";
    document.getElementById('video_box_13').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
  function fat_dino(){
    document.getElementById('channel_cover_8').style.opacity="1";
    document.getElementById('channel_cover_8').style.backgroundColor="#def1ff";
    document.getElementById('video_box_12').style.display = "block";
    document.getElementById('video_box_13').style.display = "block";
    document.getElementById('view_channel').style.display = "block";
    
    document.getElementById('channel_cover_2').style.opacity=".3";
    document.getElementById('channel_cover_3').style.opacity=".3";
    document.getElementById('channel_cover_4').style.opacity=".3";
    document.getElementById('channel_cover_5').style.opacity=".3";
    document.getElementById('channel_cover_6').style.opacity=".3";
    document.getElementById('channel_cover_7').style.opacity=".3";
    document.getElementById('channel_cover_1').style.opacity=".3";
    
    document.getElementById('video_box_2').style.display = "none";
    document.getElementById('video_box_3').style.display = "none";
    document.getElementById('video_box_4').style.display = "none";
    document.getElementById('video_box_5').style.display = "none";
    document.getElementById('video_box_6').style.display = "none";
    document.getElementById('video_box_7').style.display = "none";
    document.getElementById('video_box_8').style.display = "none";
    document.getElementById('video_box_9').style.display = "none";
    document.getElementById('video_box_10').style.display = "none";
    document.getElementById('video_box_11').style.display = "none";
    document.getElementById('video_box_1').style.display = "none";
    document.getElementById('empty_box').style.display = "none";
  }
  
</script>

</body>

</html>

<!-- i have added 5 reference of cyberpunk 2077 in this code.
find it and Comment it in comments section
best of luck 🤗 -->

6. YouTube homepage clone

Made by C O F F E E ✨. YouTube homepage clone with loading screen. Source

<!DOCTYPE html>
<html>
    <head>
        <title>YouTube</title>
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
    
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
    margin: 0;
    padding: 0;
    background: #282828;
    padding-top: 100px;
    font-family: 'Roboto', sans-serif;
}

.navbar{
    width: 100%;
    height: 50px;
    background: #282828;
}

.icon{
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    float: right;
}




.avatar img{
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background: #333;
    border: 1px solid #333;
}
.logo{
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-left: 15px;
}

.logo img{
    width: 100px;
}

.chips{
    border-top: 1px solid #525252;
    display: flex;
    background: #282828;
    max-width: 100%;
    overflow-x: scroll;
    padding: 10px;
}

.chip{
    margin-right: 10px;
    padding: 6px 11px 6px 11px;
    font-size: 14px;
    border-radius: 100px;
    color: #fff;
    border: 1px solid #525252;
    background: #3e3e3e;
     white-space: nowrap;
}

.chips .active{
    background: #fff;
    color: #000;
    border: 1px solid #fff;
    
}

.panel{
    width: 100%;
    max-height: 50px;
    display: flex;
    background: #282828;
    border-top: 1px solid #525252;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.panel .item{
    text-align: center;
    width: 100%;
    color: #909090;
    padding-top: 6px;
    width: 100%;
    height: 50px;
    
}

.panel .item .text{
    font-size: 10px;
    margin-top: -1px;
    
}

.panel .active{
    color: #fff;
}

.topnav{
    width: 100%;
    position:fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0 5px #0008;
    z-index: 1;
}
.sendfb{
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px 0 5px;
    color: #3EA6FF;
    font-weight: bolder;
    font-size: 14px;
}

.preloader{
    width: 100%;
    height: 100vh;
    
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    position: fixed;
    align-items: center;
    justify-content: center;
    background: #fff;
    top: 0;
    left: 0;
}

.preloader img{
    width: 100%;
    height: 100vh;
}
.poster{
    position: relative;
}
.poster img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.vavatar{
    float: left;
    margin: 10px;
    background: #333;
    height: 35px;
    border-radius: 100px;
}
.vtext{
    float: left;
    margin-top: 10px;
    
}
.vmenu{
    float: right;
    color: #aaaaaa;
    margin: 10px;
}
.vavatar img{
    width: 35px;
    height: 35px;
    border-radius: 100px;
}
.vtitle{
    color: #fff;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}
.vabout{
    color: #aaaaaa;
    font-size: 11px;
}
.video{
    padding-bottom: 70px;
}
.container{
    padding-bottom: 50px;
}
.vtime{
    background: #000;
    color: #fff;
    font-size: 10px;
    display: inline-block;
    border-radius: 2px;
    padding: 1px 5px 1px 5px;
    font-weight: 600;
    position: absolute;
    bottom: 15px;
    right: 10px;
    letter-spacing: 1px;
}


.loader{
    width: 33px;
    height: 33px;
    background: #3330;
    border-top: 5px solid #3ea5fe;
    border-left: 5px solid #3ea5fe;
    border-bottom: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 50px;
    
    animation-name: colorchange;   
    animation-duration: 0s; 
    animation-delay: 1s;  
    animation-iteration-count: infinite;
    -webkit-animation-name: colorchange;   
    -webkit-animation-duration: 1s; 
    -webkit-animation-delay: 0.56s;  
    -webkit-animation-iteration-count: infinite;
}


@keyframes colorchange {
   0% {
    transform: rotate(0deg);
    
    }
    
    100% { 
    transform: rotate(360deg);
    }
}
@-webkit-keyframes colorchange {
     0% {
    transform: rotate(0deg);
    
    }
    
    100% { 
    transform: rotate(360deg);
    }
}

.cntpreload{
width: 100%;
height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
     background: #282828;
}
    </style>
    </head>
    <body>
    
    <div id="cntpre" class="cntpreload">
            <div class="loader">
                
            </div>   
        </div>
    
    <div class="topnav">
        <div class="navbar">

            <div class="logo">
                          <img
            onload="ready()" src="https://static.wixstatic.com/media/c287e1_753ff5405b334bbabed7ae9c66e32f2c~mv2.png/v1/fill/w_570,h_175,al_c,lg_1/c287e1_753ff5405b334bbabed7ae9c66e32f2c~mv2.png"
          />
            </div>
            
            <div class="icon avatar">
                <img src="https://api.sololearn.com/Uploads/Avatars/7743590.jpg"> 
                
            </div>
            
            
            <div class="icon">
            
             <i class="material-icons">search</i>

            </div>
            
            <div class="icon">
            
             <i class="material-icons">videocam</i>

            </div>
            
            <div class="icon">
            
            <i class="material-icons">cast_connected</i> 

            </div>
        </div>
        <div class="chips">
            <div class="chip active">
                All
            </div>
            
            <div class="chip">
                HTML
            </div>
            
            
            <div class="chip">
                Cascading Style Sheets
            </div>
            
            
             <div class="chip">
                JavaScript
            </div>
            
              
            <div class="chip">
                HTML
            </div>
            
             <div class="chip">
                JavaScript
            </div>
            
              <div class="chip">
                StorageBucket
            </div>
            
            
            <div class="sendfb">
                SEND FEEDBACK
            </div>
            
        </div>
        </div>
        <div class="container">
            
            <div class="video">
            
            <div class="poster">
                <img src="https://cdn.pixabay.com/photo/2019/10/26/14/55/foliage-leaf-4579709_1280.jpg"/>
                
                <div class="vtime">
                    10:30
                </div>
                
                
            </div>
            
            <div class="video-controll">
            
            <div class="vavatar">
                <img src="https://api.sololearn.com/Uploads/Avatars/7743590.jpg">
            </div>
                
                <div class="vtext">
                    <div class="vtitle">Video title</div>
                 <div class="vabout">COFFEE . 1M . 1 day ago</div>
                </div>
                <div class="vmenu">
                    <i class="material-icons">more_vert</i>
                </div>
                
            </div>     
            </div>
            <div class="video">
            
            <div class="poster">
                <img src="https://cdn.pixabay.com/photo/2016/09/29/10/08/halloween-1702531_1280.jpg"/>
                
                <div class="vtime">
                   10:58
                </div>
            </div>
            
            <div class="video-controll">
            
            <div class="vavatar">
                <img src="https://api.sololearn.com/Uploads/Avatars/7743590.jpg">
            </div>
                
                <div class="vtext">
                    <div class="vtitle">Video title</div>
                 <div class="vabout">COFFEE . 9M . 6 days ago</div>
                </div>
                <div class="vmenu">
                    <i class="material-icons">more_vert</i>
                </div>
                
            </div>
            </div>
               <div class="video">
            
            <div class="poster">
                <img src="https://cdn.pixabay.com/photo/2016/02/19/11/19/computer-1209641_1280.jpg"/>
                
                
                <div class="vtime">
                  2.50  
                </div>
            </div>
            
            <div class="video-controll">
            
            <div class="vavatar">
                <img src="https://api.sololearn.com/Uploads/Avatars/7743590.jpg">
            </div>
                
                <div class="vtext">
                    <div class="vtitle">Video title</div>
                 <div class="vabout">COFFEE . 1M . 1 day ago</div>
                </div>
                <div class="vmenu">
                    <i class="material-icons">more_vert</i>
                </div>
                
            </div>  
            </div>
            
              <div class="video">
            
            <div class="poster">
                <img src="https://cdn.pixabay.com/photo/2019/10/26/14/55/foliage-leaf-4579709_1280.jpg"/>
                
                <div class="vtime">
                    10:30
                </div>
                
                
            </div>
            
            <div class="video-controll">
            
            <div class="vavatar">
                <img src="https://api.sololearn.com/Uploads/Avatars/7743590.jpg">
            </div>
                
                <div class="vtext">
                    <div class="vtitle">Video title</div>
                 <div class="vabout">COFFEE . 2M . 3 days ago</div>
                </div>
                <div class="vmenu">
                    <i class="material-icons">more_vert</i>
                </div>
                
            </div> 
            </div>
        </div>
        <div class="panel">
            
            <div class="item active">
                 <i class="material-icons">home</i>
                <div class="text">
                    Home
                </div>
            </div>
            <div class="item">
                 <i class="material-icons">whatshot</i>
                <div class="text">
                    Trending
                </div>
            </div>
            <div class="item">
                 <i class="material-icons">subscriptions</i>
                <div class="text">
                    Subscriptions
                </div>
            </div>
            
            <div class="item">
                 <i class="material-icons">markunread</i>
                <div class="text">
                    Inbox
                </div>
            </div>
            
            <div class="item">
                 <i class="material-icons">video_library</i>
                <div class="text">
                    Library
                </div>
            </div>
        </div>
        <div id="preloader" class="preloader">
        
   
<svg width="140" height="120" viewBox="0 0 192 192">
<style type="text/css">
    .st0{fill:#EE3124;}
    .st1{fill:#FFFFFF;}
</style>
<g>
    <path class="st0" d="M180.3,53.4c-2-7.6-8-13.6-15.6-15.7C151,34,96,34,96,34s-55,0-68.8,3.7c-7.6,2-13.5,8-15.6,15.7
        C8,67.2,8,96,8,96s0,28.8,3.7,42.6c2,7.6,8,13.6,15.6,15.7C41,158,96,158,96,158s55,0,68.8-3.7c7.6-2,13.5-8,15.6-15.7
        C184,124.8,184,96,184,96S184,67.2,180.3,53.4z"/>
    <polygon class="st1" points="78,122.2 78,69.8 124,96     "/>
</g>
</svg>
        
        </div>
        <div id="sp" class="spreliader">
            
        </div>
<script>
function ready(){
     document.getElementById("preloader").style.display = "none";
}

window.onload = function (){
      document.getElementById("cntpre").style.display = "none";
}
    </script>
    </body>
</html>

7. Basic YT Clone

Made by Raj Chhatrala. Source

<!DOCTYPE html>
<html>
<head>
    <title>Youtube</title>
    <meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="youtube.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
<style>
    @import url('https://fonts.googleapis.com/css?family=Nunito+Sans|Oswald&display=swap');

body{
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    /*height: 100vh;*/
    background-color: rgb(50, 50, 50);
}

.display{
    width: 100%;
    /*background-color: #987345;*/
}

.header{
    width: 100%;
    height: 10vh;
    /*background-color: #fa4323;*/
}

.header div{
    float: left;
    display: flex;
    align-items: center;
    color: white;
    font-size: 18px;
}

.header-logo{
    width: 67%;
    padding-left: 3%;
    height: 100%;
    /*background-color: #876234;*/
    align-items: center;
    font-size: 26px;
    color: white;
    font-family: 'Oswald', sans-serif;
}

.upload-btn{
    width: 10%;
    height: 100%;
    /*background-color: #faca09;*/
    justify-content: center;
}

.search-btn{
    width: 10%;
    height: 100%;
    /*background-color: #578672;*/
    justify-content: center;
}

.profile-btn{
    width: 10%;
    height: 100%;
    /*background-color: #da2243;*/
    justify-content: center;
}

.profile-btn div{
    width: 90%;
    height: 70%;
    background-image: url('https://api.sololearn.com/Uploads/Avatars/4991698.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}

.video{
    width: 100%;
    height: 250px;
    /*background-color: #876451;*/
    padding-bottom: 10px;
    border-bottom: 0.5px solid rgb(190,190,190);
}

.thumbnail{
    width: 100%;
    height: 200px;
    background-image: url('https://api.sololearn.com/Uploads/Avatars/4991698.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.details{
    width: 100%;
    height: 50px;
}

.creator-picture{
    width: 50px;
    height: 100%;
    /*background-color: #f292aa;*/
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
}

.creator-picture div{
    width: 70%;
    height: 70%;
    background-image: url('https://api.sololearn.com/Uploads/Avatars/4991698.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}

.vdet{
    width: 75%;
    height: 100%;
    /*background-color: #986512;*/
    float: left;
    font-family: 'Nunito Sans', sans-serif;
}

.vop{
    width: 10%;
    height: 100%;
    /*background-color: #faaa12;*/
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(200, 200, 200);
    font-size: 18px; 
}

.vname{
    width: 100%;
    height: 60%;
    /*background-color: #ada9ff;*/
    display: flex;
    align-items: center;
    font-size: 18px;
    color: white;
}

.voth{
    width: 100%;
    height: 40%;
    /*background-color: #ada9ff;*/
    color: rgb(200, 200, 200);
    font-size: 12px;
    display: flex;
    align-items: center;
}

.voth i{
    font-size: 3px;
}

.options{
    width: 100%;
    height: 10vh;
    background-color: rgb(50, 50, 50);
    position: fixed;
    top: 90vh;
}

.op{
    width: 20%;
    height: 100%;
    /*background-color: #637829;*/
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    font-size: 22px;
    color: white;
}
    </style>
</head>
<body>
    <div id="app">
        <div class="display">
            <div class="header">
                <div class="header-logo">
                    <div style="height: 50%;padding: 3px 10px 4px 10px;background-color: #f00;border-radius: 6px;"><i class="fa fa-play"></i></div>Youtube</div>
                <div class="upload-btn"><i class="fa fa-video"></i></div>
                <div class="search-btn"><i class="fa fa-search"></i></div>
                <div class="profile-btn"><div></div></div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>
            <div class="video">
                <div class="thumbnail"></div>
                <div class="details">
                    <div class="creator-picture"><div></div></div>
                    <div class="vdet">
                        <div class="vname">This is some video title</div>
                        <div class="voth">
                            RajChhatrala&nbsp;<i class="fa fa-circle"></i>&nbsp;80M&nbsp;<i class="fa fa-circle"></i>&nbsp;views 2 days ago
                        </div>
                    </div>
                    <div class="vop"><i class="fa fa-ellipsis-v"></i></div>
                </div>
            </div>

        </div>
        <div style="height: 10vh;"><div class="options">
            <div class="op"><i class="fa fa-home"></i></div>
            <div class="op"><i class="fa fa-fire"></i></div>
            <div class="op"><i class="fas fa-clone"></i></div>
            <div class="op"><i class="fa fa-envelope"></i></div>
            <div class="op"><i class="fa fa-folder"></i></div>
        </div></div>
    </div>
</body>
</html>

8. Working YouTube Clone

Made by Jaagrav. Source

<!DOCTYPE html>
<html>
  <head>
    <title>YouTube</title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="YC.css" />
    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");

body {
  margin: 0;
  padding: 0;
  background: #282828;
  padding-top: 100px;
  font-family: "Roboto", sans-serif;
  text-decoration:none;
}

.navbar {
  width: 100%;
  height: 50px;
  background: #282828;
}

.icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  float: right;
}

.avatar img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #333;
  filter: grayscale(1) invert(1);
}
.logo {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-left: 15px;
}

.logo img {
  width: 100px;
}

.tabs {
  border-top: 1px solid #525252;
  display: flex;
  background: #282828;
  max-width: 100%;
  overflow-x: scroll;
  padding: 10px;
}

.tab1,.tab2,.tab3,.tab4,.tab5,.tab6,.tab7 {
  margin-right: 10px;
  padding: 6px 11px 6px 11px;
  font-size: 14px;
  border-radius: 100px;
  color: #fff;
  border: 1px solid #525252;
  background: #3e3e3e;
  white-space: nowrap;
}

.chips .active {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}

.bottomnav {
  width: 100%;
  max-height: 50px;
  display: flex;
  background: #282828;
  border-top: 1px solid #525252;
  position: fixed;
  bottom: 1px;
  left: 0;
  z-index: 1;
}

.bottomnav .item {
  text-align: center;
  width: 100%;
  color: #909090;
  padding-top: 6px;
  width: 100%;
  height: 50px;
}

.text1, .text2, #text1, #text2, .text3, #text3 {
  font-size: 15px;
  margin-top: -1px;
}

.bottomnav .active {
  color: #fff;
}

.topnav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 0 5px #000;
  z-index: 1;
}
.sendfb {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px 0 5px;
  color: #3ea6ff;
  font-weight: bolder;
  font-size: 14px;
}

.preloader {
  width: 100%;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  position: fixed;
  align-items: center;
  justify-content: center;
  background: #111;
  top: 0;
  left: 0;
  transition: 1s;
}

.preloader img {
  width: 100%;
  height: 100vh;
}

#search-icon:hover .search-box {
  top: 0;
}
#search-icon:hover .back-button{
    top:5px;
}
.search-box {
  position: absolute;
  height: 47px;
  width: 90%;
  z-index: +2;
  top: -55px;
  right: -12px;
  border-right: 35px solid #111;
  transition: 0.5s;
  background: #111;
  border: none;
  outline: none;
  font-family: "Roboto", sans-serif;
  color: white;
}
.back-button{
    position:absolute;
    z-index:+3;
    height:40px;
    width:40px;
    background:#eee;
    margin:auto;
    top:-55px;
    left:13px;
    transition:.5s;
    filter:invert(1);
}
.container {
  position: absolute;
  height: 80%;
  width: 100%;
  border-bottom: 1px solid rgb(51, 51, 51);
  margin: auto;
  right: 0;
  left: 0;
  overflow-x:hidden;overflow-y:scroll;
}
.result {
  position: relative;
  height: 62%;
  width: 100%;text-decoration:none;
}
.thumbnail {
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  width: 100%;
}
.title {
  color: white;
  position: relative;
  margin: auto;
  height: 45px;
  overflow: hidden;
  width: 80%;
  left: 20px;
  top: 10px;
  font-family: "roboto", sans-serif;
  text-decoration:none;
}
.user {
  position: relative;
  color: rgb(141, 141, 141);
  font-family: "roboto", sans-serif;
  left: 60px;
  top: -5px;text-decoration:none;
}
.channelArt {
  position: relative;
  height: 40px;
  border-radius: 50%;
  bottom: 90px;
  text-decoration:none;
  left: 7px;
}
.LoaderBG{
    position:absolute;
    height:100%;
    width:100%;
    margin:auto;top:0;right:0;left:0;bottom:0;
   background:#111; display:flex;justify-content:center;align-items:center;
   transition:1s;
    z-index:10;
}
.YTLogo{
    position:absolute;
    width:80%;
}
        </style>
  </head>
  <body>
    </div>
<!-- Do Not Copy, this code may go private soon because of public API key. -->
    <div class="topnav">
      <div class="navbar">
        <div class="logo">
          <img
             src="https://static.wixstatic.com/media/c287e1_753ff5405b334bbabed7ae9c66e32f2c~mv2.png/v1/fill/w_570,h_175,al_c,lg_1/c287e1_753ff5405b334bbabed7ae9c66e32f2c~mv2.png"
          />
        </div>

        <div class="icon avatar">
          <img onclick="alert('Sign in real YouTube!')"
            src="https://icon-library.net/images/no-profile-picture-icon/no-profile-picture-icon-29.jpg"
          />
        </div>

        <div class="icon" id="search-icon">
          <img src="https://cdn.pixabay.com/photo/2016/09/05/10/50/app-1646213_960_720.png" class="back-button">
          <input
            type="text"
            class="search-box"
            placeholder="Search YouTube"
            onchange="search();"
          />
          <i class="material-icons">search</i>
        </div>

        <div class="icon">
          <i class="material-icons" onclick="alert('Sign in real YouTube!')">videocam</i>
        </div>

        <div class="icon">
          <i class="material-icons" onclick="alert('No device found!')">cast_connected</i>
        </div>
      </div>

      <div class="tabs">
        <div class="tab1" onclick='ck(1);searchTrending("")'>
          All
        </div>

        <div class="tab2" onclick='ck(2);searchTrending("iphone")'>
          iPhone
        </div>

        <div class="tab3" onclick='ck(3);searchTrending("macbook pro")'>
          MacBook Pro
        </div>

        <div class="tab4" onclick='ck(4);searchTrending("JavaScript")'>
          JavaScript
        </div>

        <div class="tab5" onclick='ck(5);searchTrending("Pewdiepie")'>
          Pewdiepie
        </div>

        <div class="tab6" onclick='ck(6);searchTrending("music")'>
          Music
        </div>

        <div class="tab7" onclick='ck(7);searchTrending("mark rober")'>
          Mark Rober
        </div>

        <div class="sendfb" onclick="alert('We know we are the best, Team YouTube')">
          SEND FEEDBACK
        </div>
      </div>
    </div>
    <div class="container">
     <a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=D1PvIWdJ8xo"><div class="result"><img src="https://i.ytimg.com/vi/D1PvIWdJ8xo/mqdefault.jpg" class="thumbnail"><h4 class="title">[MV] IU(아이유) _ Blueming(블루밍)</h4><h5 class="user">1theK (원더케이)</h5><img src="https://yt3.ggpht.com/a/AGF-l7-Re-aZqStVxsLpRLFrg3iHmAMTu0H9PcSoOA=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=eQaHmeVkSR0"><div class="result"><img src="https://i.ytimg.com/vi/eQaHmeVkSR0/mqdefault.jpg" class="thumbnail"><h4 class="title">Skip Bayless reacts to the Dallas Cowboys' Week 11 win over the Lions | NFL | UNDISPUTED</h4><h5 class="user">Skip and Shannon: UNDISPUTED</h5><img src="https://yt3.ggpht.com/a/AGF-l7-ckmAn2xRC36hJC0Wq-2SHxcoFcSE40LXIiA=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=Cy0GSN0VDaU"><div class="result"><img src="https://i.ytimg.com/vi/Cy0GSN0VDaU/mqdefault.jpg" class="thumbnail"><h4 class="title">Defense Steps Up With 4 Interceptions to Seal Win | Inside Scoop</h4><h5 class="user">Kansas City Chiefs</h5><img src="https://yt3.ggpht.com/a/AGF-l78jnzmxfyO-HoLCP1Wt19kXRHu1l8C8pevAHg=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=riE1x51qxyI"><div class="result"><img src="https://i.ytimg.com/vi/riE1x51qxyI/mqdefault.jpg" class="thumbnail"><h4 class="title">This Is What #1 Ranked Player Did IN ONE HALF!! YIKES!! Jonathan Kuminga NBA #1 Draft Pick In 23!?</h4><h5 class="user">Ballislife</h5><img src="https://yt3.ggpht.com/a/AGF-l78b2Yo5BGlyzIrgrerqAD2h1GSpc0H0SwGYxg=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=10Vl0TM80uQ"><div class="result"><img src="https://i.ytimg.com/vi/10Vl0TM80uQ/mqdefault.jpg" class="thumbnail"><h4 class="title">10 Actors Who Hated Their Own Films</h4><h5 class="user">Screen Rant</h5><img src="https://yt3.ggpht.com/a/AGF-l7-tvcfr9jhgt-fWpglbraG8jPLsHxxNf05hMw=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=LPW_us_4MDA"><div class="result"><img src="https://i.ytimg.com/vi/LPW_us_4MDA/mqdefault.jpg" class="thumbnail"><h4 class="title">Simone Biles Says She Wasn’t Told Larry Nassar Was Under Investigation | TODAY</h4><h5 class="user">TODAY</h5><img src="https://yt3.ggpht.com/a/AGF-l7_oUMGmsaYIRbQ4zWTEscxSyAYMalf7JUbDCg=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=KNxukCbX2AA"><div class="result"><img src="https://i.ytimg.com/vi/KNxukCbX2AA/mqdefault.jpg" class="thumbnail"><h4 class="title">Pompeo discusses Israeli settlements in West Bank</h4><h5 class="user">Fox Business</h5><img src="https://yt3.ggpht.com/a/AGF-l7-9c_LAv1cAsYQVwVl5BtUAmjdeGCp5qiD0FA=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=GzGAMmMCpJ0"><div class="result"><img src="https://i.ytimg.com/vi/GzGAMmMCpJ0/mqdefault.jpg" class="thumbnail"><h4 class="title">The Future of Chess Was Foretold Early || Karpov vs Hort || Alekhine Memorial (1971)</h4><h5 class="user">agadmator's Chess Channel</h5><img src="https://yt3.ggpht.com/a/AGF-l78CF6--3JhhbFqP3wDit3GpuWFcRzI2K6PoTg=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=E7qyZawdbww"><div class="result"><img src="https://i.ytimg.com/vi/E7qyZawdbww/mqdefault.jpg" class="thumbnail"><h4 class="title">S2E1 'Mind on Fire' - Impulse</h4><h5 class="user">Impulse</h5><img src="https://yt3.ggpht.com/a/AGF-l7-pEIKFIl8q6pKQTc0BduwWMEo_QYZGECKZrQ=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a><a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v=4k5Vrt85Kj8"><div class="result"><img src="https://i.ytimg.com/vi/4k5Vrt85Kj8/mqdefault.jpg" class="thumbnail"><h4 class="title">Bolivia: gobierno de facto quiere dar la imagen de "normalidad"</h4><h5 class="user">teleSUR tv</h5><img src="https://yt3.ggpht.com/a/AGF-l7_jnXmbETzE6YlLXwMPG_poC4G_l-wBNy24Rw=s240-c-k-c0xffffffff-no-rj-mo" class="channelArt"></div></a>  
    </div>
    <div class="bottomnav">
      <div class="item active">
        <i class="material-icons" onclick='searchTrending("");cc(1);' id="text1">home</i>
        <div class="text1">
          Home
        </div>
      </div>

      <div class="item">
        <i class="material-icons"  onclick = 'searchTrending("Trending");cc(2);' id="text2">whatshot</i>
        <div class="text2">
          Trending
        </div>
      </div>

      <div class="item">
        <i class="material-icons" onclick="alert('Sign in real YouTube!')" id="text3">video_library</i>
        <div class="text3">
          Library
        </div>
      </div>
    </div>
    <div class="LoaderBG" style="filter:opacity(1);">
    <img src="https://www.techadvisor.co.uk/cmsdata/features/3681165/youtube-logo-png-2069_thumb1200_16-9.png" class="YTLogo"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
var key = "AIzaSyCHvrQM98U7SHt_OerRwk-c4pUfdI-n3qY";
      
      var profileId = [1,2], profilepics = [1,2];
      function search() {
        profileId.length = 0;
        profilepics.length = 0;
        
        var x = document.querySelector(".search-box").value;
        var api =
          "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" +
          x +
          "&key="+key+"&maxResults=20&type=video";
        
        $.getJSON(api, response);
      }
      var j=0,y=1;
      setTimeout(disapp, 3000);
      window.onload=ck(1);
      window.onload=searchTrending("");
      function disapp() {
       document.querySelector(".LoaderBG").style.transform = "translateY(-100%)";
      };
      function getProfile() {j=-1;j=-1;
        var inter = setInterval(searchh, 20);
        function searchh() {
        var api2="";
          j++;
          if (j > 8) clearInterval(inter);
          api2 =
            "https://www.googleapis.com/youtube/v3/channels?part=snippet&id=" +
            profileId[j] +
            "&key="+key;
          $.getJSON(api2, profilePix);
        }
        function profilePix(event) {
          profilepics.push(event.items[0].snippet.thumbnails.medium.url);
        }
      }
      function response(data) {
      document.querySelector(".container").innerHTML = "";
        for (var i = 0; i < data.items.length; i++)
       profileId.push(data.items[i].snippet.channelId);
        getProfile();
        setTimeout(() => {
          for (var j = 0; j < data.items.length; j++)
    document.querySelector(".container").innerHTML +=
                '<a target="_blank" style="text-decoration:none;" href="https://www.youtube.com/watch?v='+data.items[j].id.videoId+'"><div class="result"><img src="' +
                data.items[j].snippet.thumbnails.medium.url +
                '" class="thumbnail"/><h4 class="title">' +
                data.items[j].snippet.title +
                '</h4><h5 class="user">' +
                data.items[j].snippet.channelTitle +
                '</h5><img src="' +
                profilepics[j] +
                '" class="channelArt"/></div></a>';
        }, 1000);
        
      }
      function searchTrending(y){
             profileId = [];
        profilepics = [];
        var x = document.querySelector(".search-box").value; x = y;
        var api =
          "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" +
          x +
          "&key="+key+"&maxResults=10&type=video";
        $.getJSON(api, response);
        x = "";
        }
        function ck(x){
            document.querySelector(".tab"+x).style.background="#fff";
            document.querySelector(".tab"+x).style.color="#000";       document.querySelector(".tab"+x).style.border="1px solid #fff";
           if(x!=y){ document.querySelector(".tab"+y).style.background="#3e3e3e";
            document.querySelector(".tab"+y).style.color="#fff";       document.querySelector(".tab"+y).style.border="1px solid #525252";}
            y=x;}
            var v=1;
            function cc(o){ document.querySelector(".text"+o).style.color="#fff";
            document.querySelector("#text"+o).style.color="#fff";
           if(o!=v){  document.querySelector(".text"+v).style.color="#909090"; 
           document.querySelector("#text"+v).style.color="#909090"; 
            }v=o;}
            
    </script>
  </body>
</html>

9. Mini YouTube clone

Made by Bartika. Mini YouTube clone with preloader just like youtube one. Source

<!--

It was actually created 4 or 5 months ago.

-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://use.fontawesome.com/bae75bb48f.js"></script>
        <style>
            body {
    margin:0;
    color:white;
}
#main{
    width:100vw;
}
#name{
    display:inline-block ;
    font-weight:bold;
    margin-left:2.5vw;
    width:70vw;
    margin-top:1vh;
    line-height:5vw;
    font-size:14px;
}
#side{
    float:left;
    width:13vw;
    height:20vw;
    margin-top:1vh;
}
#sub{
    height:10vw;
    width:10vw;
    border-radius:50%;
    object-fit:cover;
    margin-left:2.5vw;
}
#grey{
    color:#aaa;
    margin-left:15.5vw;
    font-size:12.5px;
    margin-top:0.5vh;
}
#tag{
    background:#fc0;
    border-radius:2.5px;
    color:black;
    display:inline-block ;
    margin-left:3vw;
    margin-top:1vh;
    font-size:15px;
}
#l{
    display:inline-block ;
    font-size:12.5px;
    color:#aaa;
    margin-left:2vw;
}
#option{
    float:right;
    width:10vw;
    height:20vw;
    color:#aaa;
    text-align:center;
    margin-top:2.25vh;
}
#video1{
    margin-bottom:4vh;
}
#footer{
    border-top:1px solid #444;
    height:50px;
    width:100vw;
    position:fixed;
    bottom:0;
    background:#222;
    font-size:10px;
    text-align:center;
}
hr{
    margin:0;
    border-color:#444;
    height:0;
    width:99.5vw;
}
#footer>div{
    text-align:center;
    width:19vw;
    display:inline-block ;
    color:#aaa;
}
#footer>div>div{
    display:block;
}
#footer i{
    font-size:3vh;
    margin-top:1vh;
}
#header{
    height:30px;
    overflow:hidden;
    width:100vw;
    position:fixd;
    top:0;
    left:0;
    white-space:nowrap;
    padding-top:10px;
    padding-bottom:10px;
    background:#222;
    border-bottom:1px solid #444;
}
#header>div{
    display:inline-block ;
    height:50px;
}
#header .fa{
    float:right;
    font-size:20px;
    margin-top:5px;
    margin-right:3vh;
}
#fa-youtube-play{
    margin-left:1.5vh;
    height:30px;
    width:45px;
    vertical-align:middle;
}
#avatar{
    height:30px;
    width:30px;
    vertical-align:middle ;
    float:right;
    margin-right:2vh;
}
#yt{
    margin-left:1vh;
    width:50px;
}
#categories{
    position:fixd;
    top:51px;
    left:0;
    height:50px;
    width:100vw;
    overflow:scroll;
    background:#222;
    padding-left:10px;
    white-space:nowrap ;
}
#categories>div{
    display:inline-block ;
    border-radius:20px;
    padding:5px;
    font-size:15px;
    margin-top:8.75px;
    padding-right:10px;
    padding-left:10px;
    margin-left:5px;
    border:1px solid #444;
    background:#333;
}
#active{
    background:#fff !important;
    color:#222;
}
#feedback{
    background:transparent !important;
    color:#0af !important;
    border:none !important;
    font-weight:bold;
    margin-right:15px;
}
iframe{
    width:100vw;
    height:40vh;
    outline:none;
    border:none;
}
#video2 #name{
    font-size:16px;
    line-height:25px;
    margin-top:0.5vh;
}
#video2 #grey{
    margin-left:2.5vw;
}
#ytkids{
    background:#111;
    width:90vw;
    height:70px;
    margin-top:2vh;
    text-align:left;
}
#ytkids>div{
    display:inline-block ;
}
#n>div{
    display:block;
}
#kidimg{
    height:30px;
    margin:20px;
}
#m{
    height:35px;
    margin-top:-40px;
    float:left;
}
#n #grey{
    margin-left:0;
    margin-top:-40px;
    background:;
    height:20px;
    float:left;
}
#openkids{
    background:#0af;
    font-weight:bold;
    color:#111;
    outline:none;
    border:none;
    padding:10px;
    border-radius:2px;
    float:right;
    margin:11px;
    margin-right:-8px;
    transition:0.5s;
    width:25vw;
}
#openkids:active{
    background:#0cf;
}
#panel{
    width:90vw;
    margin-top:3vh;
    margin-bottom:3vh;
}
#panel>div{
    display:inline-block ;
    width:16vw;
    color:#aaa;
    border-radius:50%;
    transition:0.5s;
}
/*#panel>div:hover #ii{
    color:#0af;
}*/
#panel>div:active{
    background:rgba(999,999,999,0.3);
}
#panel>div>div{
    display:block;
}
#ii{
    font-size:25px;
    margin-bottom:0.5vh;
}
#in{
    font-size:12.5px;
}
#channel{
    padding-top:1.5vh;
}
#channel #sub{
    float:left;
}
#channel #name{
    float:left;
    margin-top:-0.5vh;
}
#channel #grey{
    float:left;
    margin-top:0vh;
    margin-bottom:2vh;
}
#subscribe{
    float:right;
    color:red;
    font-weight:bold;
    font-size:14px;
    margin-top:-1.75vh;
    margin-right:3vw;
}
#des{
    color:#aaa;
    font-size:14px;
    margin-top:3vw;
    margin-left:3vw;
    overflow:hidden;
    transition:;
    height:auto;
}
.hide{
    height:0;
}
#link{
    text-decoration:none;
    color:#0af;
    
}
#video2{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    overflow:scroll;
    background:#222;
    z-index:1;
}
.inner{
    display:none;
}
.fa-angle-down{
    position:absolute;
    top:2vh;
    left:2vh;
    font-size:30px;
    text-shadow:0 0 5px black;
    height:50px;
    width:50px;
}
#avideo{
    position:fixed;
    top:0;
    left:0;
}
#gap{
    height:41.5vh;
}
.main{
    color:white !important;
}
.link{
    color:#0af;
    font-size:14px;
    margin-left:1.5vh;
}
#topfixed{
    position:fixed;
    top:0px;
    height:101px;
    transition:0.35s;
    background:#222;
}
#load{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    background-color:#222;
    z-index:5;
}
#logo{
    position:absolute;
    top:0;bottom:0;right:0;left:0;
    margin:auto;
    height:80px;
    width:120px;
}
.activ{
    color:#aaa !important;
}
#sss{
    transition:0.25s;
}
#sss:active{
    background:rgba(999,999,999,0.2);
}
            </style>
    </head>
    <body bgcolor="#222">
    <div id="load">
        <img src="https://www.freepnglogos.com/uploads/youtube-icon-logo-7.png" id="logo">
    </div>
    <div id="topfixed">
    <div id="header">
        <div id="ytlogoimg"><img src="https://www.freepnglogos.com/uploads/youtube-icon-logo-7.png" id="fa-youtube-play"></div><div id="yt">YouTube</div><img src="https://cdn2.iconfinder.com/data/icons/circle-avatars-1/128/039_girl_avatar_profile_woman_headband-512.png" id="avatar">
        <i class="fa fa-search"></i><i class="fa fa-video-camera"></i>
    </div>
    <div id="categories">
        <div id="active">All</div>
        <div>Universe</div>
        <div>Barbie Dreamhouse Adventures</div>
        <div>Sofia the First</div>
        <div>Cinderella</div>
        <div>Physics</div>
        <div>Chemistry</div>
        <div>Smartphones</div>
        <div>Computer Programming</div>
        <div>Storytelling</div>
        <div>Frozen</div>
        <div id="feedback">SEND FEEDBACK</div>
    </div>
    </div>
    <div id="gap" style="height:100px"></div>
        <div id="video1">
            <img src="https://assets.nflxext.com/ffe/siteui/allow-robots/contentSampling/seo-watch-free-link-preview.jpg" id="main"><br><div id="side"><img src="https://yt3.ggpht.com/a/AATXAJyzyrPJMwSCUxtTlY-MQ9sEqX8XHm8MYq4yr7e6Gw=s900-c-k-c0xffffffff-no-rj-mo" id="sub"></div><div id="option"><i class="fa fa-ellipsis-v"></i></div><div id="name">Watch as much as you want for one low price.</div><div id="grey">Try 30 days free. Watch Anytime, Anywhere.</div><div id="tag">Oglas</div><div id="l">Netflix UK & Ireland</div>
        </div>
        <hr>
         <div id="video1" onclick="document.getElementsByClassName('inner')[0].style='display:block'">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSrla9cu4uLaOx0pimW3QSBxTcnGbLaWCje-A&usqp=CAU" id="main"><br><div id="side"><img src="https://res06.noxgroup.com/noxinfluencer/youtube/avatar/dbf9c30da7f2b77546eb48f2dffe0a23.png" id="sub"></div><div id="option"><i class="fa fa-ellipsis-v"></i></div><div id="name">Sofia the First | Two Sofias! | Disney Junior UK HD</div><div id="grey">DisneyJuniorUK . 88M views . 5 years ago</div>
        </div>
        <hr>
        <div id="video1" onclick="document.getElementsByClassName('inner')[1].style='display:block'">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS2bD4NxkM4OkVh-ROEjlSslSFHKXuV468sUQ&usqp=CAU" id="main"><br><div id="side"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9F__-zR7EkN1gNm-DqFiVYgmhyQw1kKGRbw&usqp=CAU" id="sub"></div><div id="option"><i class="fa fa-ellipsis-v"></i></div><div id="name">Why Footprints Stay On The Moon and 60+ Other Amazing Facts</div><div id="grey">BRIGHT SIDE . 1.3M views . 1 year ago</div>
            </div>
            <hr>
            <div id="video1" onclick="document.getElementsByClassName('inner')[2].style='display:block'">
            <img src="https://i.ytimg.com/vi/E9Bmp_Ce8zI/maxresdefault.jpg" id="main"><br><div id="side"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR71sZTcTeuLULdU0so2uJhWmouxl5JedZntg&usqp=CAU" id="sub"></div><div id="option"><i class="fa fa-ellipsis-v"></i></div><div id="name">The Necklace Story in English | Stories for Teenagers | English Fairy Tales</div><div id="grey">English Fairy Tales . 295K views . 4 days ago</div>
        </div>
        <hr>
       <div id="video1" onclick="document.getElementsByClassName('inner')[3].style='display:block'">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQuZTxujDjNj4-lMpCaCQVidineM1GCy7N3Zw&usqp=CAU" id="main"><br><div id="side"><img src="https://yt3.ggpht.com/a/AATXAJz-sxt83S7ZJG6_J9W17LCQ9io5qbcxy3Qi94U0=s900-c-k-c0xffffffff-no-rj-mo" id="sub"></div><div id="option"><i class="fa fa-ellipsis-v"></i></div><div id="name">What If the Sun Exploded Tomorrow?</div><div id="grey">What If . 1.9M views . 9 months ago</div>
        </div> <br><br>
        <div id="footer">
            <div id="home" class="main">
                <div id="icon"><i class="fa fa-home"></i></div>
             <div id="text">Home</div>
            </div>
            <div id="home">
                <div id="icon"><i class="fa fa-compass"></i></div>
             <div id="text">Explore</div>
            </div>
            <div id="home">
                <div id="icon"><i class="fa fa-home"></i></div>
             <div id="text">Subscriptions</div>
            </div>
            <div id="home">
                <div id="icon"><i class="fa fa-bell"></i></div>
             <div id="text">Notifications</div>
            </div>
            <div id="home">
                <div id="icon"><i class="fa fa-home"></i></div>
             <div id="text">Library</div>
            </div>
        </div>
        <div id="video2" class="inner">
        <div id="avideo">
            <iframe src="https://www.youtube.com/embed/rYitE60bnnE"></iframe>
            <i class="fa fa-angle-down" onclick="document.getElementsByClassName('inner')[0].style='display:none';document.getElementsByTagName('iframe')[0].src=document.getElementsByTagName('iframe')[0].src"></i>
            </div>
            <div id="gap"></div>
            <div id="sss">
           <div id="option"><i class="fa fa-angle-up"></i></div><div id="name">Sofia the First | Two Sofias! | Disney Junior UK HD</div><div id="grey">88M views . 5 years ago</div></div>
           <center>
           <div id="ytkids">
               <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/YouTube_Kids_LogoVector.svg/1267px-YouTube_Kids_LogoVector.svg.png" id="kidimg"></div>
               <div id="n">
                   <div id="m">
                       Try YouTube Kids
                   </div><br>
                   <div id="grey">
                       An app just made for kids
                   </div>
               </div>
               <button id="openkids">OPEN APP</button>
           </div>
           <div id="panel">
               <div onclick="like1()">
                   <div id="ii">
                       <i class="fa fa-thumbs-up"></i>
                   </div>
                   <div id="in">
                       Like
                   </div>
               </div>
               <div onclick="dislike1()">
                   <div id="ii">
                       <i class="fa fa-thumbs-down"></i>
                   </div>
                   <div id="in">
                       Dislike
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-share"></i>
                   </div>
                   <div id="in">
                       Share
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-download"></i>
                   </div>
                   <div id="in">
                       Download
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-save"></i>
                   </div>
                   <div id="in">
                       Save
                   </div>
               </div>
           </div>
           </center>
            <hr>
            <div id="channel">
                <img src="https://res06.noxgroup.com/noxinfluencer/youtube/avatar/dbf9c30da7f2b77546eb48f2dffe0a23.png" id="sub">
               <div id="name">Disney Junior</div><div id="grey">8.85M subscribers</div>
               <div id="subscribe" class="sub1">SUBSCRIBE</div>
            </div>
            <hr>
            <div id="des">
                Published on Nov 17, 2014<br><br>Ever wish you in two places at once? When Sofia isn't allowed to go to the dance, she uses Cedric's cloning spell but is two always better than one?<br><br>Available on Disney+.<br><br>Want more updates and exclusive goodies? Like our Facebook page:<br><a href="http://www.facebook.com/DisneyJuniorUK" id="link">http://www.facebook.com/DisneyJuniorUK</a>
            </div><br>
        </div>
        <div id="video2" class="inner">
        <div id="avideo">
            <iframe src="https://www.youtube.com/embed/q7id7c5PSTM"></iframe>
            <i class="fa fa-angle-down" onclick="document.getElementsByClassName('inner')[1].style='display:none';document.getElementsByTagName('iframe')[1].src=document.getElementsByTagName('iframe')[1].src"></i>
            </div>
            <div id="gap"></div>
            <div class="link">#interestingfacts #amazingfacts #wierdfacts</div>
            <div id="sss">
           <div id="option"><i class="fa fa-angle-up"></i></div><div id="name">Why Footprints Stay On The Moon and 60+ Other Amazing Facts</div><div id="grey">1.3M views . 1 year ago</div></div>
           <center>
           <div id="panel">
               <div onclick="like2()">
                   <div id="ii">
                       <i class="fa fa-thumbs-up"></i>
                   </div>
                   <div id="in">
                       Like
                   </div>
               </div>
               <div onclick="dislike2()">
                   <div id="ii">
                       <i class="fa fa-thumbs-down"></i>
                   </div>
                   <div id="in">
                       Dislike
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-share"></i>
                   </div>
                   <div id="in">
                       Share
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-download"></i>
                   </div>
                   <div id="in">
                       Download
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-save"></i>
                   </div>
                   <div id="in">
                       Save
                   </div>
               </div>
           </div>
           </center>
            <hr>
            <div id="channel">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9F__-zR7EkN1gNm-DqFiVYgmhyQw1kKGRbw&usqp=CAU" id="sub">
               <div id="name">BRIGHT SIDE</div><div id="grey">36.9M subscribers</div>
               <div id="subscribe" class="sub2">SUBSCRIBE</div>
            </div>
            <hr>
            <div id="des">
                Published on Jun 7, 2019<br><br>It’s a great big world out there with all kinds of wonders and surprises. Of course, no one can know everything because the world is simply too big. But why not broaden your horizons? Wanna get the answers to the random questions that lie abandoned in the back of your brain? Then you’ve tuned in to the right video!<br><br>If you’ve been around kids long enough, you know the incessant barrage of questions that, as simple as they seem, often have you scratching your head. However, just because we grow up, it doesn’t mean that our curiosity about the world around us goes away. Do you know, for example, that in Alaska, it’s prohibited to whisper in someone’s ear when they’re moose-hunting? Or that footprints left on the Moon won’t disappear anywhere because there’s no wind? There are so many weird facts we don’t know about that sometimes it seems reality is way more exciting than fiction! So stay with us and you'll find out more!<br><br>Btw, as you’re watching this, you might think you’re totally still. Relatively speaking. But, in fact, you, (along with the entire solar system) are moving really fast because our Milky Way Galaxy is rotating at about 145 miles per second!<br><br><span id="link">#interestingfacts #amazingfacts #weirdfacts</span><br><br>Music by Epidemic Sound<br><a href="https://www.epidemicsound.com/" id="link">https://www.epidemicsound.com/</a><br><br>SUMMARY:<br>- A small village in India has a very interesting tradition: every time a baby girl is born, people there plant 111 trees in her honor.<br>- There’s no sound in space. Yes, if you shout, nobody’s gonna hear you!<br>- The highest peak in our Solar System is on Mars. At 15 miles high, Olympus Mons squashes our great Everest like a bug!<br>- The average person spends about 1/3 of their life sleeping. Think about that next time you wanna sleep in on the weekends!<br>- The average person’s nose produces about 3 pints of mucus a day. Most of it goes back into your throat and gets swallowed.<br>- There are more stars in the night sky than there are grains of sand on this planet. You might doubt that, but only because just a small portion of stars is visible in the sky!<br>- Coca-Cola was the first commercial drink to be consumed in space. So that’s one giant glug for the Atlanta-based soda manufacturer!<br>- About 40% of women apply body or hand cream at least 3 times a day. So, now ya know!<br>- The diameter of an aorta, which is the largest artery in the human body, is about the same as a garden hose.<br>- A snail can sleep for 3 years. So, now I guess you can feel better about sleeping 1/3 of your life away…<br>- The youngest monarch in history was Alfonso XIII of Spain. He became king on May 17, 1886… that is, the day he was born!<br>- "Stewardesses" is the longest word that can be typed using only the left hand. Go ahead, try it out!<br>- In one recent study, most Americans who were asked what their favorite smell was answered “banana”.<br>- Over half of the world’s population have never made or received a telephone call. Ah, a life without telemarketers, imagine!<br>- If someone could fly a plane to Pluto, it’d take them about 800 years. An 800-year-long flight, that sounds like my worst nightmare…<br>- Every year, the Earth’s rotation slows down by about 1.4 milliseconds. So if you’ve always wanted more hours in the day, just be patient!<br><br>Subscribe to Bright Side : <a href="https://goo.gl/rQTJZz" id="link">https://goo.gl/rQTJZz</a><br><br>----------------------------------------------------------------------------------------<br>Our Social Media:<br><br>Facebook: <a href="https://www.facebook.com/brightside/" id="link">https://www.facebook.com/brightside/</a><br>Instagram: <a href="https://www.instagram.com/brightgram/" id="link">https://www.instagram.com/brightgram/</a><br><br>5-Minute Crafts Youtube: <a href="https://www.goo.gl/8JVmuC" id="link">https://www.goo.gl/8JVmuC</a><br><br>Stock materials (photos, footages and other):<br><a href="https://www.depositphotos.com" id="link">https://www.depositphotos.com</a><br><a href="https://www.shutterstock.com" id="link">https://www.shutterstock.com</a><br><a href="https://www.eastnews.ru" id="link">https://www.eastnews.ru</a><br><br>----------------------------------------------------------------------------------------<br>For more videos and articles visit:<br> <a href="http://www.brightside.me/" id="link">http://www.brightside.me/</a>
            </div><br>
        </div>
        <div id="video2" class="inner">
        <div id="avideo">
            <iframe src="https://www.youtube.com/embed/E9Bmp_Ce8zI"></iframe>
            <i class="fa fa-angle-down" onclick="document.getElementsByClassName('inner')[2].style='display:none';document.getElementsByTagName('iframe')[2].src=document.getElementsByTagName('iframe')[2].src"></i>
            </div>
            <div id="gap"></div>
            <div class="link">#EnglishFairyTalesChannel</div>
           <div id="sss"><div id="option"><i class="fa fa-angle-up"></i></div><div id="name">The Necklace Story in English | Stories for Teenagers | English Fairy Tales</div><div id="grey">295K views . 4 days ago</div></div>
           <center>
           <div id="panel">
               <div onclick="like()">
                   <div id="ii">
                       <i class="fa fa-thumbs-up"></i>
                   </div>
                   <div id="in">
                       Like
                   </div>
               </div>
               <div onclick="dislike()">
                   <div id="ii">
                       <i class="fa fa-thumbs-down"></i>
                   </div>
                   <div id="in">
                       Dislike
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-share"></i>
                   </div>
                   <div id="in">
                       Share
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-download"></i>
                   </div>
                   <div id="in">
                       Download
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-save"></i>
                   </div>
                   <div id="in">
                       Save
                   </div>
               </div>
           </div>
           </center>
            <hr>
            <div id="channel">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR71sZTcTeuLULdU0so2uJhWmouxl5JedZntg&usqp=CAU" id="sub">
               <div id="name">English Fairy Tales</div><div id="grey">1.43M subscribers</div>
               <div id="subscribe" class="sub3">SUBSCRIBE</div>
            </div>
            <hr>
            <div id="des">
                Published on Sep 28, 2020<br><br>The Necklace Story in English | Story | English Story | Fairy Tales in English | Stories for Teenagers | Fairy Tales | 4K UHD | English Fairy Tales<br><br>Parental Guidance: Some material of this video may not be suitable for children below 13 years of age.<br><br>★ Subscribe us on YouTube : <a href="http://bit.ly/2Q9Affy" id="link">http://bit.ly/2Q9Affy</a><br>★ Like us on Facebook : <a href="http://bit.ly/2yLqCwV" id="link">http://bit.ly/2yLqCwV</a><br>★ Follow us on Instagram : <a href="http://bit.ly/2PuXxzy" id="link">http://bit.ly/2PuXxzy</a><br>★ Twitter : <a href="http://bit.ly/2yFXrev" id="link">http://bit.ly/2yFXrev</a><br><br>💙 Watch More Stories in English 💙<br><br>► Lion And The Mouse : <a href="https://youtu.be/GxcGVCEEdcU" id="link">https://youtu.be/GxcGVCEEdcU</a><br><br>► Red Shoes : <a href="https://youtu.be/x9Cg-NQTsag" id="link">https://youtu.be/x9Cg-NQTsag</a><br><br>► Little Mermaid : <a href="https://youtu.be/KM4sFUhHSf4" id="link">https://youtu.be/KM4sFUhHSf4</a><br><br>► Golden Bird : <a href="https://youtu.be/oMiayRL7Bec" id="link">https://youtu.be/oMiayRL7Bec</a><br><br>► Snow Queen : <a href="https://youtu.be/FBQzt5r06Ig" id="link">https://youtu.be/FBQzt5r06Ig</a><br><br>► Elves And The Shoe Maker : <a href="https://youtu.be/WK0-x4W2Adc" id="link">https://youtu.be/WK0-x4W2Adc</a><br><br>► Rumpelstiltskin : <a href="https://youtu.be/sMEC4xOSQG0" id="link">https://youtu.be/sMEC4xOSQG0</a><br><br>► Little Match Girl : <a href="https://youtu.be/656xMkdT4DE" id="link">https://youtu.be/656xMkdT4DE</a><br><br>► 12 Dancing Princess : <a href="https://youtu.be/UM0zpo0ZKIk" id="link">https://youtu.be/UM0zpo0ZKIk</a><br><br>► King Midas Touch : <a href="https://youtu.be/7IoF9IrZnXU" id="link">https://youtu.be/7IoF9IrZnXU>l</a><br><br>► Wild Swans : <a href="https://youtu.be/rfjCYh0123A" id="link">https://youtu.be/rfjCYh0123A</a><br><br>► Cinderella : <a href="https://youtu.be/18l0MA4uLas" id="link">https://youtu.be/18l0MA4uLas</a><br><br>► White Snake : <a href="https://youtu.be/NNdyZn_Fr78" id="link">https://youtu.be/NNdyZn_Fr78</a><br><br>► Three Little Pigs : <a href="https://youtu.be/Tmo4XgTHkxQ" id="link">https://youtu.be/Tmo4XgTHkxQ</a> <span id="link">#EnglishFairyTalesChannel</span><br>Disclaimer<br>► The English Fairy Tales Channel and all of its videos are not “directed to children” within the meaning of Title 16 C.F.R. § 312.2 of CHILDREN'S ONLINE PRIVACY PROTECTION ACT (USA) are not intended for children under 13 years of age. English Fairy Tales CHANNEL and its owner(s), agents, representatives, and employees do not collect any information from children under 13 years of age and expressly deny permission to any third party seeking to collect information from children under 13 years of age on behalf of English Fairy Tales CHANNEL. Further, English Fairy Tales CHANNEL denies any and all liability or responsibility for the practices and policies of YouTube and its agents and subsidiaries, or any other affiliated third party, regarding data collection.
            </div><br>
        </div>
        <div id="video2" class="inner">
        <div id="avideo">
            <iframe src="https://www.youtube.com/embed/YIXy2Kit4z4"></iframe>
            <i class="fa fa-angle-down" onclick="document.getElementsByClassName('inner')[3].style='display:none';document.getElementsByTagName('iframe')[3].src=document.getElementsByTagName('iframe')[3].src"></i>
            </div>
            <div id="gap"></div>
            <div id="sss">
           <div id="option"><i class="fa fa-angle-up"></i></div><div id="name">What If the Sun Exploded Tomorrow?</div><div id="grey">1.9M views . 9 months ago</div></div>
           <center>
           <div id="panel">
               <div onclick="like3()">
                   <div id="ii">
                       <i class="fa fa-thumbs-up"></i>
                   </div>
                   <div id="in">
                       Like
                   </div>
               </div>
               <div onclick="dislike3()"> 
                   <div id="ii">
                       <i class="fa fa-thumbs-down"></i>
                   </div>
                   <div id="in">
                       Dislike
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-share"></i>
                   </div>
                   <div id="in">
                       Share
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-download"></i>
                   </div>
                   <div id="in">
                       Download
                   </div>
               </div>
               <div>
                   <div id="ii">
                       <i class="fa fa-save"></i>
                   </div>
                   <div id="in">
                       Save
                   </div>
               </div>
           </div>
           </center>
            <hr>
            <div id="channel">
                <img src="https://yt3.ggpht.com/a/AATXAJz-sxt83S7ZJG6_J9W17LCQ9io5qbcxy3Qi94U0=s900-c-k-c0xffffffff-no-rj-mo" id="sub">
               <div id="name">What If</div><div id="grey">4.36M subscribers</div>
               <div id="subscribe" class="sub4">SUBSCRIBE</div>
            </div>
            <hr>
            <div id="des" >
                Published on Dec 14, 2019<br><br>Correction: we mixed up the Sun‘s lifespan with its age. Of course the sun is only about 4.6 billion years old, half way through its lifespan of about 10 billion years.<br><br>That star at the center of our Solar System, that superhot ball of plasma that gives us heat and energy, and amazing complexions...well, it's a ticking time bomb. The Sun is about 10 billion years old. But it's only expected to last about another 5 billion years. After that, the Sun will expand, becoming a red giant. Then it will shrink to become a white dwarf, a dying star, cooling for the next several billion years. Of course, we'll all be long gone before any of that happens. But still, can you imagine what it would be like to watch the Sun blow up before your very eyes?<br><br>What If is a mini-documentary web series that takes you on an epic journey through hypothetical worlds and possibilities. Join us on an imaginary adventure — grounded in scientific theory — through time, space and chance, as we ask what if some of the most fundamental aspects of our existence were different
            </div><br>
        </div>
        <script>
            var pr= window.pageYOffset;
window.onscroll= function(){
    var a=window.pageYOffset;
    if (pr>a){
                    document.getElementById("topfixed").style="top:0px"
    }
    else if(pr<a && pr>90){
                    document.getElementById("topfixed").style="top:-101px"
    }
    pr=a
}
    n=0
    l=0
    m=0
    o=0
    p=0
    q=0
    r=0
    s=0
    function like(){
    if(n==0){
        document.getElementsByClassName("fa-thumbs-up")[2].style="color:#0af"
        n=1
        l=0
        }
    else if(n==1){
        document.getElementsByClassName("fa-thumbs-up")[2].style="color:#aaa"
        n=0
    }
        document.getElementsByClassName("fa-thumbs-down")[2].style="color:#aaa"
    }
    function dislike(){
        if(l==0){
        document.getElementsByClassName("fa-thumbs-down")[2].style="color:#0af"
        l=1
        n=0
        }
    else if(l==1){
        document.getElementsByClassName("fa-thumbs-down")[2].style="color:#aaa"
        l=0
    }
        document.getElementsByClassName("fa-thumbs-up")[2].style="color:#aaa"
    }
    function like1(){
    if(m==0){
        document.getElementsByClassName("fa-thumbs-up")[0].style="color:#0af"
        m=1
        o=0
        }
    else if(m==1){
        document.getElementsByClassName("fa-thumbs-up")[0].style="color:#aaa"
        m=0
    }
        document.getElementsByClassName("fa-thumbs-down")[0].style="color:#aaa"
    }
    function dislike1(){
        if(o==0){
        document.getElementsByClassName("fa-thumbs-down")[0].style="color:#0af"
        o=1
        m=0
        }
    else if(o==1){
        document.getElementsByClassName("fa-thumbs-down")[0].style="color:#aaa"
        o=0
    }
        document.getElementsByClassName("fa-thumbs-up")[0].style="color:#aaa"
    }
    function like2(){
    if(p==0){
        document.getElementsByClassName("fa-thumbs-up")[1].style="color:#0af"
        p=1
        q=0
        }
    else if(p==1){
        document.getElementsByClassName("fa-thumbs-up")[1].style="color:#aaa"
        p=0
    }
        document.getElementsByClassName("fa-thumbs-down")[1].style="color:#aaa"
    }
    function dislike2(){
        if(q==0){
        document.getElementsByClassName("fa-thumbs-down")[1].style="color:#0af"
        q=1
        p=0
        }
    else if(q==1){
        document.getElementsByClassName("fa-thumbs-down")[1].style="color:#aaa"
        q=0
    }
        document.getElementsByClassName("fa-thumbs-up")[1].style="color:#aaa"
    }
    function like3(){
    if(r==0){
        document.getElementsByClassName("fa-thumbs-up")[3].style="color:#0af"
        r=1
        s=0
        }
    else if(r==1){
        document.getElementsByClassName("fa-thumbs-up")[3].style="color:#aaa"
        r=0
    }
        document.getElementsByClassName("fa-thumbs-down")[3].style="color:#aaa"
    }
    function dislike3(){
        if(s==0){
        document.getElementsByClassName("fa-thumbs-down")[3].style="color:#0af"
        s=1
        r=0
        }
    else if(s==1){
        document.getElementsByClassName("fa-thumbs-down")[3].style="color:#aaa"
        s=0
    }
        document.getElementsByClassName("fa-thumbs-up")[3].style="color:#aaa"
    }
    window.onload= function(){
        document.getElementById("load").style="display:none"
    }
    var sub1 = document.querySelector(".sub1")
    var sub2 = document.querySelector(".sub2")
    sub1.addEventListener("click",function(e){
    e.target.classList.toggle("activ")
    var csub1= document.getElementsByClassName("sub1")[0].classList
    if(csub1.contains("activ")){
        sub1.innerHTML="SUBSCRIBED"
    }
    else{
        sub1.innerHTML="SUBSCRIBE"
    }
})
    sub2.addEventListener("click",function(e){
    e.target.classList.toggle("activ")
    var csub2= document.getElementsByClassName("sub2")[0].classList
    if(csub2.contains("activ")){
        sub2.innerHTML="SUBSCRIBED"
    }
    else{
        sub2.innerHTML="SUBSCRIBE"
    }
})
    var sub3 = document.querySelector(".sub3")
    var sub4 = document.querySelector(".sub4")
    sub3.addEventListener("click",function(e){
    e.target.classList.toggle("activ")
    var csub3= document.getElementsByClassName("sub3")[0].classList
    if(csub3.contains("activ")){
        sub3.innerHTML="SUBSCRIBED"
    }
    else{
        sub3.innerHTML="SUBSCRIBE"
    }
})
    sub4.addEventListener("click",function(e){
    e.target.classList.toggle("activ")
    var csub4= document.getElementsByClassName("sub4")[0].classList
    if(csub4.contains("activ")){
        sub4.innerHTML="SUBSCRIBED"
    }
    else{
        sub4.innerHTML="SUBSCRIBE"
    }
})
        </script>
    </body>
</html>

10. Youtube clone

Made by Badshah. Source


<!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">
    <title>YouTube.com</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="icon.jpg" sizes="16x16" type="image/icon type">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <style>
        

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#load{
    height:100vh;
    width:100vw;
    background-color:#fff;
    z-index:6000;
    top:0;
    text-align:center ;
    position:absolute ;
}
#loader{
    position:relative ;
    color:red;
    text-align:center;
    font-size:6vh;
    top:50%;
    bottom:50%;
    margin:auto;
    transform:scale(2);
}
body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position:fixed;
    background-color: rgb(14, 13, 13);
    color: black;
}
div.scrollmenu {
    background-color: #f8f8ff;
    overflow: auto;
    white-space: nowrap;
    font-size:15px;
}

div.scrollmenu a {
    display: inline-block;
    color: #111;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-weight: bolder;
}

div.scrollmenu a:hover {
    background-color: #999;
}
#home{
position:relative ;
    top:45px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    background-color: #f8f8ff;
    position: fixed;
    top: 0;
    width: 100%;
  }
  li {
    float: right;
  }
  .span{
    font-size:1.5rem;
    font-family: 'Oswald', sans-serif;
  }
  .span >i{
      color: red;
      font-size:1.8rem;
  }
  ul > li i{
      color: black;
      font-size:1.5rem;
      padding: 8px 10px;
  }

  
  .div{
     margin-top: 11%;
     margin-bottom: 18%;
     background-color:#f8f8ff;
  }
  .div span{
    font-family: 'Roboto', sans-serif;
  }

  img{
      width: 10%;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      float: left;
  }
  iframe{
      width:100%;
  }

  nav{
    list-style-type: none;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    background-color: #f8f8ff;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  nav i{
    color: black;
    font-size: 1.6rem;
    padding: 0 10px;
    margin: 0 12px;
}
nav span i{
    font-size: 2.5rem;
}
@media screen and (max-width: 600px){
    nav i {
        margin:0 7.5px;
    }
}
        </style>
</head>

<body>
    
    <ul>
        <span class="span"><i class="fab fa-youtube"></i>YouTube</span>
        <li><i class="far fa-user-circle"></i></li>
        <li><i class="fas fa-search"></i></li>
        <li><i class="far fa-bell"></i></li>
        <li><i class="fab fa-chromecast"></i></li>
    </ul>
 <section id="home">

      <div class="scrollmenu">
      
        <a href="#home" >All</a>
        
        <a href="#about">Live</a>
        
        <a href="#menu">Music</a>
        
        <a href="#bts "> BTS</a>
        <a href="#infinite">Coding Infinite </a>
        <a href="#pro">Coder Pro</a>
      </div>
      
    </section>

    <div class="div">

        <span>
            <iframe width="410" height="250" src="https://www.youtube.com/embed/zzwRbKI2pn4"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </span>
        <span><img
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7BzAVE623M0x2hvdO0ZoAhKx5FVPwL9SVQA&usqp=CAU"
                alt="youtube">Carry minati<i class="fas fa-check-circle"></i>
        </span><br>
        <span>16.3M subscribers</span>

        <span>
            <iframe width="410" height="250" src="https://www.youtube.com/embed/CuklIb9d3fI"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
id="bts"></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/ytc/AKedOLTk3oOlcaYmGbmB0WrrSJzI_hX4RxCr8x5mpKHuXQ=s100-c-k-c0x00ffffff-no-rj">Bighit Entertaiments
            <i class="fas fa-check-circle"></i>
        </span><br>
        <span>56.6M subscribers</span>

        <span>
            <iframe width="410" height="250" src="https://www.youtube.com/embed/j-7jBcx3aMk"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/ytc/AKedOLQUvsRlh6T5Kjs6p31oFTwxuzEYcEZWTlEBZVRdQQ=s100-c-k-c0x00ffffff-no-rj">Techno gamerz <i class="fas fa-check-circle"></i>
        </span><br>
        <span>7.2M subscribers</span>

        <span>
            <iframe width="410" height="250" src="https://www.youtube.com/embed/K-96JmC2AkE"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/ytc/AKedOLSGWrNfK8kLeQg0yyzQ5yx_SBYbwUVxNtToo69m=s100-c-k-c0x00ffffff-no-rj"
                alt="youtube">Knowbe4 <i class="fas fa-check-circle"></i>
        </span><br>
        <span>27.3K Subscribers</span>

        <span>
            <iframe  id="infinite" width="410" height="250" src="https://www.youtube.com/embed/uZHEUA1lJGw"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/SRaAuD0QWeRDUBG2yZR1TjhTbcQzllDJOqJfA_xb9u4IAt5zC1ORSLAhe3HKYjLNADGbChg6cUI=s100-c-k-c0x00ffffff-no-rj">Coding Infinite<i class="fas fa-check-circle"></i>
        </span><br>
        <span>1Ksubscribers</span>
        <iframe width="410" height="250" src="https://www.youtube.com/embed/aKADmmA2OVc"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/ppdC0j9srUZNCxjiL5VZ4X912EmMVdlAH6eN3BLuVTmVRmffkCsTZx3OpXLk3kmRRd73xjRNYA=s100-c-k-c0x00ffffff-no-rj"
                alt="youtube">Ayush codings <i class="fas fa-check-circle"></i>
        </span><br>
        <span>51 subscribers</span>


        <span>
            <iframe  id="pro"width="410" height="250" src="https://www.youtube.com/embed/6zGf-kH1lnA"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </span>
        <span><img
                src="https://yt3.ggpht.com/H8en4p1_eLHItFz72j33brh0tBIOriMTMLcmm0y7RvzrbjZwJflWtvy3hEbd9WPR0Xpzh5DfUQ=s100-c-k-c0x00ffffff-no-rj"
            alt="youtube">Coder Pro<i class="fas fa-check-circle"></i>
        </span><br>
        <span>26 subscribers</span>
    </div>
    <nav>
        <i class="fas fa-home"onclick="copy()"></i>
        <i class="far fa-compass"onclick="copy()"></i>
        <span><i class="far fa-plus-circle"onclick="copy()"></i></span>
        <i class="fal fa-play-circle"onclick="copy()"></i>
        <i class="fal fa-album-collection"onclick="copy()"></i>
    </nav>
<div id="load"><i class="fab fa-youtube" id="loader"></i></div>
<script>
    alert(" Click all functions\n Made by me")
function copy(){
alert ("Not available")}
window.onload = function(){
    document.getElementById("load").style.display = "none";
    document.body.style.position = "relative";
}
    </script>
</body>

</html>

11. Youtube Loading Animation

Made by SwapniL. Source


<!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">
  <title>Youtube Loading Animation</title>

<!-- import for 'Poppins' font -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  </style>

<!-- CSS rules (starts) -->
  <style>
    *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    body{
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
    }

/* CSS rule for outer card */
    #base{
      position: relative;
      top: 20vh;
      height: 280px;
      width: 250px;
      background-color: rgba(128, 128, 128, 0.6);
      display: flex;
      align-items: center;
      flex-direction: column;
    }

/* CSS rule for thumbnail */
    .card{
      height: 150px;
      width: 200px;
      background-color: gray;
      overflow: hidden;
      margin: 1.5em 0;
    }

/* CSS rule for logo */
    .circle{
      height: 50px;
      width: 50px;
      background-color: gray;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }

    .group{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 200px;
    }

/* CSS rule for title and description box (starts) */
    .content{
      height: 100%;
      width: 140px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
    }
    .content div{
      height: 15px;
      width: 100%;
      background-color: gray;
      overflow: hidden;
    }
    .content div:nth-child(2){
      width: 80% !important;
    }
/* CSS rule for title and description box (ends) */

/* CSS rule for loading shadow */
    .skeleton::before{
      content: "";
      display: block;
      height: 100%;
      width: 0px;
      background-color: gray;
      box-shadow: 0 0 45px 10px #555;
      animation: slide 1.2s linear forwards infinite;
    }

/* keyframes for loading shadow */
    @keyframes slide {
      to{
        transform: translateX(300px);
      }
    }

/* CSS rules for youtube link (starts) */
    .yt{
        height : 60px;
        width : 100%;
        position: absolute;
        top: calc(100% - 80px);
     }
     .yt > a{
        height : 40px;
        width : 100px;
        display : flex;
        align-items : center;
        justify-content : center;
        background-color: rgba(128, 128, 128, 0.6);
        text-decoration : none;
        color : black;
        border-radius: 8px;
        position: relative;
        top: calc(50% - 20px);
        left: calc(50% - 50px);
        border:1px solid gray;
      }
/* CSS rules for youtube link (ends) */

  </style>
  
<!-- CSS rules (ends) -->

</head>
<body>


  <div id="base">
    <div class="card skeleton"></div>
    <div class="group">
      <div class="circle skeleton"></div>
      <div class="content">
        <div class="skeleton"></div>
        <div class="skeleton"></div>
      </div>
    </div>
  </div>


<!-- markup for youtube link (starts) -->
  <div class="yt">
      <a href="https://youtu.be/bR_oupy3uaM"
       target="_blank">let's learn</a>
  </div>
<!-- markup for youtube link (ends) -->

</body>
</html>