我想在超大屏幕中有一个带有视频的 Bootstrap 轮播。其实我应该知道如何做到这一点，但我就是不能让它正常工作!视频在那里，但我只看到了其中的一小部分，其他东西似乎覆盖了它们。我尝试使用 CSS 进行试验，但没有任何方法可以将视频放大到超大屏幕的大小(我希望它们像超大屏幕的背景一样)。
我的 html 设置如下:
<body>
<div class="jumbotron">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">2
<video id="video-background" preload muted autoplay loop>
<source src="images/cerb1.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">3
<video id="video-background" preload muted autoplay loop>
<source src="images/cerbkaff.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
<video id="video-background" preload muted autoplay loop>
<source src="images/cerbkaff2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div> <!-- carousel-inner -->
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
<div class="container-fluid">
<h2><b>BLA: BLALBLA BLA BLA TEST</h2>
</div>
</div> <!-- end jumbotron -->
我的 CSS 设置:
.jumbotron {
background-color: rgba(255, 255, 255, 0.075);
position: relative;
overflow: hidden;
height: 400px;
}
.jumbotron .container-fluid {
position: relative;
color: #ffffff;
z-index: 2;
}
#video-background {
position: absolute;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 9999;
}
这就是它的错误外观。轮播视频仅显示为一条小线，而它们应占据整个较亮区域(超大屏幕区域)的空间
有谁知道我该如何看清这些乱七八糟的东西吗？
最佳答案
视频背景的绝对定位是破坏它的原因。 删除:
position: absolute;
在“video-background”类上一切正常。
关于jquery - Bootstrap 旋转木马与超大屏幕中的视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37137988/