Question

我有以下标记：

.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

Answer 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;
}

Answer 2

您可以将height

中固定的padding-bottom更改为.jumbotron

.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>

Answer 3

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

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

响应视频和父容器高度

3 个答案: