响应式视频和父容器高度答案

【问题标题】：Responsive Video and Parent container height响应式视频和父容器高度
【发布时间】：2016-09-05 13:36:37
【问题描述】：

我有以下标记：

.jumbotron {
  position: relative;
  z-index: -101;
  overflow: hidden;
  height: 500px;
  background: red;
}
.jumbotron video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -100;
}
.video-content {
  text-align: center;
  color: #fff;
}

<div class='jumbotron'>
  <video autoplay loop class="fillWidth">
    <source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogv" />
    <source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
  </video>
  <div class='video-content'>
    <h1>Welcome to the Site</h1>
    <p>This is just a test but it shows a background video</p>
  </div>
</div>

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-12'>
      <h2>Section Heading</h2>
    </div>
  </div>
</div>

我的问题是关于video 背景的响应能力。当我将视口缩小时，video 最终开始缩小，而父 div 仍然比它长 - 导致不需要的红色背景。

如何确保父 div 随视频大小缩放？所以当我把它直接带到> 480px 时，h2 标签就会在视频的正下方。

你可以看到一个小提琴here

【问题讨论】：

标签： html css video responsive-design html5-video

【解决方案1】：

这对你有用:)

.jumbotron {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.jumbotron video {
    position: absolute;
    bottom: 50%; 
    right: 50%;
    -webkit-transform: translateX(50%) translateY(50%);
    transform: translateX(50%) translateY(50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

【讨论】：

我喜欢这个解决方案，你能解释一下这里发生了什么吗？我有点困惑！

【解决方案2】：

您可以将.jumbotron中的固定height更改为padding-bottom

.jumbotron {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  background: red;
}
.jumbotron video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%
}
.video-content {
  text-align: center;
  color: #fff;
}

<div class='jumbotron'>
  <video autoplay loop class="fillWidth">
    <source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogv" />
    <source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
  </video>
  <div class='video-content'>
    <h1>Welcome to the Site</h1>
    <p>This is just a test but it shows a background video</p>
  </div>
</div>

<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-12'>
      <h2>Section Heading</h2>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

不确定我是否理解。我通过将视频的高度和宽度更改为视口大小，使视频充满了屏幕。但需要保持纵横比。

.jumbotron video {
  ...
  height: 100vh;
  width: 100vw;
  ...
}

【讨论】：