如何使背景视频始终适合页面答案

【问题标题】：How to make background video always fit the page如何使背景视频始终适合页面
【发布时间】：2020-01-28 15:43:36
【问题描述】：

我正在尝试以某种方式重新创建 Apple 的 Apple TV+ 页面。他们有一个背景视频，可以缩放以适应页面（不改变尺寸，它就在他们页面的中心）https://www.apple.com/apple-tv-plus/。但是当我将高度设置为 100% 并使浏览器窗口的高度更小时，视频会在左右两侧出现边框。试过 min-width=100%;但它似乎不起作用。

HTML

<div class="container_video">
   <video class="liveflex" autoplay loop>
       <source src="resources/large_2x.mp4" type="video/mp4">
   </video>
</div>

CSS

.container_video {
    display: flex !important;
    position: fixed;
    min-width: 100% !important;
    margin-top: auto !important;
    z-index: -1;
}
video.background {
    display: flex !important;
    position: fixed;
    height: 100%;
    align-self: center;
    margin-top: auto !important;
    z-index: -1;
}

【问题讨论】：

video.liveflex { position: fixed; bottom: 0; right: 0; min-width: 100%; min-height: 100% }
看起来像 stackoverflow.com/questions/59882244/… 的副本

标签： html css

【解决方案1】：

尝试利用object-fit: cover

被替换的内容的大小可以保持其纵横比，同时填充元素的整个内容框。如果对象的纵横比与其框的纵横比不匹配，则该对象将是剪裁以适合。

body {
  margin: 0;
  padding: 0;
  color: white;
}

main {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
}

.video-background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>
  <div class="video-background">
    <video class="liveflex" autoplay loop>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
   </video>
  </div>
  <main>
    <article>
      <h1>Hello World!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam efficitur nisl non cursus tincidunt. Morbi tellus ex, placerat eu pharetra at, tristique et felis. Cras quis turpis porta, viverra risus sit amet, eleifend elit. Aenean placerat venenatis
        elit, sed molestie lacus elementum et. Phasellus nisl mauris, cursus eu sodales sed, volutpat et magna. Sed enim nulla, semper aliquam mauris rhoncus, hendrerit ornare dolor. Proin diam ante, tempor in egestas quis, sodales viverra ligula. Aenean
        massa eros, semper sit amet mattis vitae, ultrices sit amet nunc. Suspendisse ultricies mattis elit ut pretium. Aenean euismod commodo augue, quis cursus mi ullamcorper sed. Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas.</p>
    </article>
    <article>
      <h1>Foo Bar!</h1>
      <p>Morbi suscipit pretium enim, vel sollicitudin ex varius et. Nullam consequat vitae lectus ut facilisis. Suspendisse tincidunt consectetur nisi vitae ultricies. Etiam non pellentesque odio. Ut hendrerit tincidunt pretium. Curabitur nec imperdiet
        sapien. Nullam sed sem massa. Nullam dapibus ut libero nec tempus. Phasellus gravida, risus quis congue viverra, massa augue scelerisque libero, molestie pharetra elit mi sit amet nisl. Fusce ac gravida velit.</p>
    </article>
  </main>
</div>

【讨论】：

【解决方案2】：

如果你的容器有一个固定的高度，那肯定会有所帮助。

.container_video {
    display: flex !important;
    position: fixed;
    width: 100%;
    margin-top: auto !important;
    z-index: -1;
    height: 100%;
    left: 0;
    top: 0;
}
video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

【讨论】：