Bootstrap视频jumbotron

我试图获得一个视频来覆盖自举Jumbotron没有成功。这似乎是一件非常简单的事情，但我尝试的一切似乎都失败了。Bootstrap视频jumbotron

我试过解决方案发布here没有成功。我也尝试着将视频的位置设置为绝对值，并将所有边设置为0，但这似乎也不起作用。我究竟做错了什么？

这说明这是怎么回事： https://jsfiddle.net/kae4q601/

.jumbotron{ 
 
    position: relative; 
 
    
 
    /* Tried setting the height. Didnt work either */ 
 
    /* height: 200px; */ 
 
} 
 

 
#video-background { 
 
    position: absolute; 
 
    bottom: 50%; 
 
    right: 50%; 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -1000; 
 
    overflow: hidden; 
 
}

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="jumbotron"> 
 
    <video id="video-background" preload muted autoplay loop> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
 
    </video> 
 
    <div class="container"> 
 
    Hello World 
 
    </div> 
 
</div>

来源

2016-01-06 Austneal

看起来你已经得到了很多不必要的CSS的事情。要开始，我肯定会定义jumbotron z-index以保持背景中的灰色填充。

.jumbotron{ 
    position: relative; 
    z-index:-101; 
}

接下来的视频背景，像这样一些清洁更简单的代码：

#video-background { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     overflow: hidden; 
     z-index: -100; 
     width:100%; 
}

这里的https://jsfiddle.net/kae4q601/5/让我知道，如果这是你试图达到的小提琴。

来源

2016-01-06 02:38:11

是的，这似乎完美地工作！我猜测关键是要设置jumbotron的z-index？ – Austneal

我建议不要使用固定位置来实现这一点。如果视频包装器下方有内容，视频将会跟随该页面。相反，我会使用绝对位置并隐藏父级溢出。这将允许您将包装（.jumbotron）的高度设置为您想要的值，并且视频将充当背景封面。小提琴：https://jsfiddle.net/kae4q601/15/ –

@JoshSanger同意。我必须改变它的位置：绝对 – Austneal

由于.jumbotron具有灰色背景，因此将视频背景设置为z-index: -1000;将使视频显示在灰色背景后面，因此不可见。此外，制作视频背景时，父母需要拥有overflow:hidden，而不是视频本身。

CSS：

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
    height: 200px; 
} 

.container { 
    position: relative; 
    color: #ffffff; 
    z-index: 2; /* Show content above video */ 
} 

#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: 1; 
}

这里是工作提琴：https://jsfiddle.net/kae4q601/15/

来源

2016-01-06 02:52:27

Bootstrap视频jumbotron

回答

相关问题