Responsive video conflicting with DIV in CSS

Question

I have a responsive video on my page and I've set to to adjust to a static background image when the display reaches below 767px width (for smartphones).

Problem is, that anything between 768px to 1199px (width) eg. on iPads, my video DIV container height does not respond to, causing a white margin below the video. Ideally the container should adjust from 266px - 347px (height) in parallel with the video height/width.

.videobg is my container and .videoheader is the video itself.

Here is the code:

.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

For this certain case it looks that solution will be:

.videobg {
  font-size: 0px;
}

I strongly recommend using other scaling for responsive videos (e.g. like this) and, oh dear, so many media queries! :D But, duh, if it works for you it's fine.