Адаптивное видео конфликтует с DIV в CSS

У меня есть адаптивное видео на моей странице, и я настроил на настройку статического фонового изображения, когда дисплей достигает ширины ниже 767 пикселей (для смартфонов).

Проблема в том, что что-либо от 768 до 1199 пикселей (ширина), например. на iPad высота контейнера DIV моего видео не соответствует высоте, что приводит к появлению белого поля под видео. В идеале контейнер должен регулироваться от 266 пикселей до 347 пикселей (высота) параллельно высоте / ширине видео.

.videobg - это мой контейнер, а .videoheader - это само видео.

Вот код:

.videobg {
margin:0;
padding:0;
width:100%; 
height:100%;
position: static;
z-index: -100;
min-height: 250px;
max-height: 423px;
}

.videoheader {
    margin:0;
    padding:0;
    width:100%;
    height:100%;

}

@media (max-width: 767px) {
    .videobg {
        background: url('images/home/header.jpg') center center / cover no-repeat;
        height:266px;
    }

    .videoheader {
        display: none;
    }
}


@media(max-width:768px){
.videobg {
height:266px;
     }
}

@media (max-width: 884px) {
    .videobg {
        height:280px;
    }
}


@media (max-width: 1000px) {
    .videobg {
        height:347px;
    }
}