Отзывчивое видео конфликтует с DIV в CSS

Question

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

Проблема в том, что что-нибудь между 768px и 1199px (ширина), например. на 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;
    }
}

Answer 1

Для этого конкретного случая выглядит, что решение будет:

.videobg {
  font-size: 0px;
}

Я настоятельно рекомендую использовать другое масштабирование для отзывчивых видео (например, вот так) и, о дорогой, так много медиа-запросов!:D Но, если это работает на вас, это нормально.