У меня проблема с моим фоновым дисплеем. Его вырезание снизу. Я хочу показать это видео в полном фоне под панелью навигации. Мой код HTML похож на
, а мой css ниже
body{
//background-image: url(../images/mybg2.jpg);
background-color:#000000;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
overflow: hidden;
background-position: center center;
position: relative;
width:100vw;
margin: 0;
}
.navbar img {
width: 100%;
max-width: 500px;
margin: 0 auto;
display: table;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
body:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.12);
}
.nav-bg{
background-color: transparent !important;
padding-left: 0px!important;
padding-right: 0;
z-index: 9;
}
.navbar-toggler {
padding: 0px 6px!important;
}
.navbar-collapse {
z-index: 99;
margin-top: 30px;
}
@media (min-width: 1025px) {
.nav-bg {
padding-left: 120px!important;
}
}
@media (max-width: 991px) {
.navbar-nav .nav-link {
background: #dc3545!important;
padding: 8px 8px!important;
}
.nav-item {
margin-bottom: 5px!important
}
}
@media (max-width: 599px) {
.navbar img {
width: 100%;
max-width: 100%;
}
.navbar-collapse {
margin-top: 120px;
}
.navbar-toggler {
position: absolute;
right: 0;
top: 78px;
}
}
#videoBG {
position:fixed;
z-index: -1;
}
#footer {
z-index: 9;
}
@media (max-width: 767px) {
body{
background-image: url(../images/mobile-back.jpg);
}
#footer {
bottom: 50px!important;
}
}
@media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
Я не знаю, что не так, я пытаюсь от двух часов, но Я не могу показать полное видео в браузере, его обрезка снизу примерно на 30%. Дайте мне знать, если кто-то может помочь мне сделать его на 100% во весь экран. Спасибо!