横幅元素中的封面视频：始终居中且全宽和全高答案

【问题标题】：Cover-Video in banner element: always centered and full-width and height横幅元素中的封面视频：始终居中且全宽和全高
【发布时间】：2015-02-16 02:19:08
【问题描述】：

我知道关于这个主题有很多问题，但是我找不到合适的解决方案。

我的网站顶部有一个 #banner 元素，高度为 710 像素。

在这个#banner 中，我的视频应该始终像“背景尺寸：封面”一样缩放。视频是在顶部还是底部剪切并不重要，它应该始终填充#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;   
}

我在here 中找到了正确的代码，但它不适用于我。缩放浏览器窗口时，视频不会调整大小。对我来说，这不起作用。

我还尝试使用covervid 插件，该插件似乎非常适合全背景尺寸，但不适用于固定高度的横幅。如果我使用这个插件并调整窗口的大小，它会从宽度跳到高度，总是将宽度或高度设置为自动。

知道如何通过 css 或 js 做到这一点吗？

【问题讨论】：

这能满足你的需求吗 - stackoverflow.com/questions/10797632/… ?

标签： html video

【解决方案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>

【讨论】：