Question

你好我有一个带有<video>标签的div，它被设置为div的背景。我有它的工作，但当我继续在下面创建一个div时，视频延伸到该div。基本上，视频超出其父容器扩展到其他div。看起来它占据了网站的整个高度，而不是div的全高。

这是我的代码：

.banner {
    height: 903px;
    width: 100%;
}

.banner video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    background: url() no-repeat;
    background-size: cover;
}
<div class="banner">
    <video autoplay="" loop="">
         <source src="//myvid.mp4" type="video/mp4">
         <source src="//myvid.ogg" type="video/ogg">
     </video>
</div>

有谁知道为什么会这样做？

谢谢！

Answer 1

您将position: fixed更改为绝对值。由于fixed将当前显示范围从父元素中分离出来。因此，在您使用widht: 100%; height: 100%;

之后滚动并占用所有内容

您还可以将position: relative;添加到横幅类，以便视频将其作为父级。

Answer 2

更改位置：固定为绝对并让父容器位于：relative 检查此代码段

.banner {
  height: 200px;
  width: 100%;
  border: 1px solid green;
  position: relative;
}
.banner video {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: url() no-repeat;
  background-size: cover;
}

<div class="banner">
  <video width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
  </video>
</div>
<div>
  whkjshfdksjhdfksdf
</div>

希望有所帮助

Answer 3

除了更改默认设置外，position .banner（relative）和视频（absolute）的.banner也发生了变化，视频的高度也有变化被修改为维持16：9宽高比的百分比。为了证明它仅涵盖了它的容器（.banner），html, body { width: 100%; height: 100%; font: 400 16px/1.428 Verdana; color: #eee; overflow-x: hidden; overflow-y: auto; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; border: 0; outline: none; } .banner { position: relative; height: 28vh; width: 50vw; } .banner video { position: absolute; right: 0; left: 0; top: 0; bottom: 0; min-width: 100%; min-height: 56.25%; width: auto; height: auto; z-index: 0; /*background: url() no-repeat;*/ background-size: cover; }设置为视口长度的一半。请在完整页面模式下查看代码段。

段

<div class="banner">
  <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
  </video>
</div>

SELECT 
    * 
FROM
    clients
INNER JOIN
    tenantusers AS cm ON cm.tenusr_ID = clients.cli_ContractManager
INNER JOIN
    tenantusers AS bd ON bd.tenusr_ID = clients.cli_BusinessDevelopment
ORDER BY cli_Name;

采取全高度站点而不是容器的背景录影

3 个答案:

段