How to stop a video tag overflowing with its div container.

Question

I need part of this video to be hidden if it exceeds the height of the containers.

I thought hiding overflow would be the solution here, but somehow it doesn't seem to want to listen.

the code:

body,
html,
.container,
#video-background {
    height: 100%;
    margin: 0;
    padding: 0;    
}

html {
    overflow-x:hidden;
}

#video-background {
    min-width: 100%;
    min-height: 100%;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 

    width: 100%;
    height: 100%;    

}

@media (min-aspect-ratio: 16/9) {
  #video-background {
    width: 100%;
    height: auto; /* actually taller than viewport */
   }
}
@media (max-aspect-ratio: 16/9) {
   #video-background {
     width: auto; /* actually wider than viewport */
     height: 100%;
   }
}

Here is my JSfiddle

https://jsfiddle.net/dqbq29ru/3/

It would also be useful to find out or mention in the comments if you are having problems with the video element in ie9 or higher.

Many thanks

Answer 1

The answer to this question is that the position absolute in the video tag prevents overflow usage from being hidden.

So, I removed this from the video tag because it was not needed at the end, and added an overflow hidden in the container.

thanks