video.css

body{
    position: relative;
    background-color: #f0f0f0;
    font-family: 'roboto',sans-serif;
}
.navbar{
    position :fixed;
    top: 0;
    left: 0;
    width:95%;
    height:60px;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    padding: 0 2.5vw;
    margin-bottom:20px;
}
.toggle-btn{
    width:20px;
    height:10px;
    position: relative;
    cursor: pointer;
    /* background-color: black; */

}
.toggle-btn span{
    position:absolute;
    width: 100%;
    height:2px;
    top:50%;
    transform: translateY(-50%);
    background-color: #0e0a0a;
}
.toggle-btn span:nth-child(1){
    top:0
}
.toggle-btn span:nth-child(3){
    top:100%
}
.logo{
    height:30px;
    margin:-10px 30px 0
}
.search-box{
    position: relative;
    max-width: 500px;
    width: 50%;
    height:35px;
    display: flex;
}
#search{
    width: 85%;
    height: 100%;
    border:2px solid #dbddbd;
    padding: 0 22px;
    font-size: 16px;
    text-transform: capitalize;
}
#search-btn{
    width: 15%;
   height: 40px;
    background-color: #dbddbd;
    border: 2px solid #f0f0f0;
    padding:5px 0;
    border-left: none;
}
#search-btn img{
    height:100%;

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

.user-options .icon{
    height: 80%;
    margin-right: 20px;
    cursor: pointer;
}
.user-dp{
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
}

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

#Vedio{
    margin-top:500px;
    height:100%;
}
iframe{
    margin-top:20px;
}