Html 拍摄整个站点高度而不是容器高度的背景视频

您好，我有一个带有

标记的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>

.banner{
高度：903px；
宽度：100%；
}
.横幅视频{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
z指数：-1；
背景：url（）不重复；
背景尺寸：封面；
}

有人知道它为什么这样做吗

---

谢谢

您有

位置：固定

将其更改为绝对。因为fixed将当前显示范围与父元素分开。因此，自使用

widt:100%以来，滚动并占用所有内容；身高：100%

您还可以添加
position:relative
添加到banner类，以便视频将其作为父类。
您有
位置：固定的
将其更改为绝对的。因为fixed将当前显示范围与父元素分开。因此，自使用
widt:100%以来，滚动并占用所有内容；身高：100%

您还可以添加
position:relative到banner类，以便视频将其作为父对象。
将位置：固定为绝对，并将父容器设置为位置：相对
检查此代码段


.banner{
高度：200px；
宽度：100%；
边框：1px纯绿色；
位置：相对位置；
}
.横幅视频{
位置：绝对位置；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
背景：url（）不重复；
背景尺寸：封面；
}

您的浏览器不支持HTML5视频。
whkjshfdksjhdfksdf
更改位置：固定为绝对，并将父容器设置为位置：相对
检查此代码段


.banner{
高度：200px；
宽度：100%；
边框：1px纯绿色；
位置：相对位置；
}
.横幅视频{
位置：绝对位置；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
背景：url（）不重复；
背景尺寸：封面；
}

您的浏览器不支持HTML5视频。
whkjshfdksjhdfksdf
除了对默认值的更改外，还有对
.banner
（
相对
）和视频（
绝对
）的
位置的更改，并且视频的高度已修改为保持16:9纵横比的百分比。为了证明它只覆盖其容器（
.banner
），将
.banner
设置为视口长度的一半。请以整页模式查看代码段

一小条

html，
身体{
宽度：100%；
身高：100%；
字体：400 16px/1.428 Verdana；
颜色：#eee；
溢出x：隐藏；
溢出y：自动；
}
*,
*：之前，
*：之后{
框大小：边框框；
保证金：0；
填充：0；
边界：0；
大纲：无；
}
.横幅{
位置：相对位置；
高度：28vh；
宽度：50vw；
}
.横幅视频{
位置：绝对位置；
右：0；
左：0；
排名：0；
底部：0；
最小宽度：100%；
最小身高：56.25%；
宽度：自动；
高度：自动；
z指数：0；
/*背景：url（）不重复*/
背景尺寸：封面；
}
除了对默认值的更改外，还有对
.banner
（
相对
）和视频（
绝对
）的
位置的更改，并且视频的高度已修改为保持16:9纵横比的百分比。为了证明它只覆盖其容器（
.banner
），将
.banner
设置为视口长度的一半。请以整页模式查看代码段

一小条

html，
身体{
宽度：100%；
身高：100%；
字体：400 16px/1.428 Verdana；
颜色：#eee；
溢出x：隐藏；
溢出y：自动；
}
*,
*：之前，
*：之后{
框大小：边框框；
保证金：0；
填充：0；
边界：0；
大纲：无；
}
.横幅{
位置：相对位置；
高度：28vh；
宽度：50vw；
}
.横幅视频{
位置：绝对位置；
右：0；
左：0；
排名：0；
底部：0；
最小宽度：100%；
最小身高：56.25%；
宽度：自动；
高度：自动；
z指数：0；
/*背景：url（）不重复*/
背景尺寸：封面；
}

谢谢，这正是我想要的。这对我有用。谢谢如果允许的话，我会接受你的答案。我认为geeky有一个更好的答案，就是运行一段代码，你可能应该接受这个答案，只是为了将来遇到同样问题的人。当然，如果你坚持的话，我会这么做：谢谢你，这正是我想要的。这对我有用。谢谢如果允许的话，我会接受你的答案。我认为geeky有一个更好的答案，就是运行一段代码，你可能应该接受这个答案，只是为了将来遇到同样问题的人。当然，如果你坚持的话，我会这么做：谢谢！这就是解决办法。cptnk以同样的解决方案只领先你一分钟，所以我不得不接受他的回答。不过我给了你一票！Np完全好…我喜欢他的解决方案！这就是解决办法。cptnk以同样的解决方案只领先你一分钟，所以我不得不接受他的回答。不过我给了你一票！Np完全好…我也喜欢他的解决方案