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

Question

I know that there are many questions on this topic, but I have not found a suitable solution.

I have an element #banneron top of my site whose height is 710px.

In this #banner, I have my video, which should always scale as "background-size: cover". It doesn’t matter if the video is cut from above or below, it should always fill the element #banner.

#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 correctly here , but it does not work properly for me. When you scale the browser window, the video does not change. This does not work for me.

covervid, , , , . , , .

, css js?

Answer 1

max-height:100%, ,

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>

Hide result