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

回答

相關問題