Bootstrap Carousel with Jumbotron中的视频

我想要一个带有jumbotron视频的引导程序传送带。其实我应该知道如何做到这一点，但我不能让它正常工作！视频在那里，但我只看到它们中的一小部分，其他的东西似乎覆盖了它们。我试图用css进行实验，但没有任何工作将视频放大到jumbotron的大小（我希望它们像jumbotron的背景）。Bootstrap Carousel with 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; 
}

这是怎么回事faultily看起来。旋转木马视频只能看到一条小线，而它们应该占据整个较亮区域的空间（jumbotron区域）

是否有人知道我该如何看待这个混乱？

来源

2016-05-10 sardine

视频背景的绝对定位是什么打破它。删除：

position: absolute;

在“视频背景”类和所有应该很好。

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

来源

2016-05-10 12:12:13 Morphasis

太感谢你了！它改善了很多情况！我还有一些视频尚未取得jumbotron的全部视频，但现在好多了，而且我的目标还远远不止于此！：d – sardine

Bootstrap Carousel with Jumbotron中的视频

回答

相关问题