#video-viewport{
    /* width is set as 100% here. any width can be specified as per requirement */
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    position: relative;
    margin-top: -10%;
}

#video-player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
background-size: cover;
background-position: 46% 0;
}

#mute-sound {

    position: absolute !important;
    top: 22%;
    right: 5%;
    z-index: 5;
    background: 
    #fff;
    padding: 10px 10px 4px;
    border-radius: 25em;

}

#playcontrol{
    position: absolute !important;
    top: 22%;
    right: 5%;
    margin-right: 50px;
    z-index: 5;
    background: 
    #fff;
    padding: 10px 10px 4px;
    border-radius: 25em;

}

#video-background-container .container {
    padding: 0;
}

#video-background-container .content {
    padding-top: 0;
}

.video-bg-color {
    position: absolute;
    top: 0;
    left: -100%;
    width: 5000px;
    background: 
    #efe9f0;
    height: 91.5%;
    z-index: -2;
}

@media (max-width: 480px){
#video-viewport {
    width: 100vw;
    padding-top: 63.25%;
    height: 0;
    position: relative;
    margin-top: -10%;
    left: -9%;
}

.video-bg-color {
    position: absolute;
    top: 0;
    left: -100%;
    width: 5000px;
    height: 76.5%;
    z-index: -2;
}
}

@media (min-width: 481px) and (max-width: 1080px){
    .video-bg-color {
    position: absolute;
    top: 0;
    left: -100%;
    width: 5000px;
    height: 83%;
    z-index: -2;
}
}

@media (min-width: 481px) and (orientation: landscape){
    .video-bg-color {
    position: absolute;
    top: 0;
    left: -100%;
    width: 5000px;
    height: 85%;
    z-index: -2;
}
}

@media (min-width: 1081px){
        .video-bg-color {
    position: absolute;
    top: 0;
    left: -100%;
    width: 5000px;
    height: 91.5%;
    z-index: -2;
}
}