Cover-Video in banner element: always centered and full-width and height - html

Question

I know there are a lot of questions out there regarding this topic, however I couldn't find a proper solution.
I have a #banner element on top of my site that is 710px high.
In this #banner I have my video that should always scale like "background-size:cover". It doesn't matter if the video is cut at the top or bottom, it should just always fill the #banner element.
#banner {
position:relative;
opacity:0;
height:710px;
width:100%;
overflow:hidden;
}
#banner .video {
position: absolute;
bottom: 50%;
right: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}
I found this code right here but it doesn't properly work for me. The video does not resize when scaling the browser-window. For me this does not work.
Also I tried to use the covervid plugin that seems to work perfect for full-background sizes but not to fit it inside a banner with fixed height.
If I use this plugin and resize the window it jumps from width to height fitting, always setting the width or either height to auto.
Any idea how to do this via css or js?

Answer 1

Just remove the opacity from the banner and add max-height:100% to make sure that there's no vertical scroll
DEMO
html,
body {
margin: 0;
height: 100%;
}
#banner {
position: relative;
height: 710px;
border: 5px solid tomato;
overflow: hidden;
max-height: 100%;
box-sizing: border-box;
}
#banner .video {
min-width: 100%;
min-height: 100%;
}
<div id="banner">
<video class="video" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>