Question

我想要一个带有jumbotron视频的bootstrap轮播。其实我应该知道如何做到这一点，但我不能让它正常工作！视频在那里，但我只看到一些，其他东西似乎覆盖他们。我尝试用css进行实验，但是没有任何工作可以将视频放大到超大尺寸的大小（我希望它们像jumbotron的背景一样）。

我的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;
}

这就是它看起来如何。旋转木马视频只能作为一条小线看到，而它们应该占据整个较亮区域（jumbotron区域）的空间

有人知道我如何看待这个烂摊子吗？

Answer 1

视频背景的绝对定位正在打破它。删除：

position: absolute;

在＆＃34;视频背景＆＃34;所有人都应该很好。

plnkr： https://plnkr.co/edit/63xDn8EaGB3qDLSmtrx4?p=preview

Bootstrap Carousel与Jumbotron中的视频

1 个答案: