Bootstrap視頻背景未響應（不縮放）

我試圖使用bootstrap使我的個人網站與背景中的視頻。當我縮小瀏覽器窗口時，視頻，標題佔位符和按鈕都不會縮放（不響應）。我不知道什麼是錯的。任何幫助都會有用。非常感謝！Bootstrap視頻背景未響應（不縮放）

這裏是我的HTML代碼：

<div class = "header-container"> 
     <div class = "video-container"> 
       <video preload = "true" autoplay loop volume = "0"> 
       <source src = "videos/main.mp4" type = "video/mp4" > 
       </video> 
     </div> 
     <h3 class="main"> 
      Title Placeholder 
       <div class="col-md-5 text-center col-sm-offset-3"> 
         <a href="#services" class="btn btn-lg outline col-sm-offset-2">Services</a> 
         <a href="#about" class="btn btn-lg">About</a> 
         <a href="#contact" class="btn btn-primary btn-lg outline">Contact</a> 
       </div> 
     </h3> 
    </div>

這裏是我的CSS代碼：

.header-container { 
    width: 100%; 
    height: 700px; 
    border-left: none; 
    border-right: none; 
    position: absolute; 
    padding: 10px; 
    overflow: hidden; 
} 

.video-container { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 700px; 
    width: 100%; 
    overflow: hidden; 
}

來源

2015-12-15 Harold Finch

能否請您創建小提琴？ –

@SunilGehlot我不確定創建小提琴是什麼意思？ –

[Bootstrap 3 - Responsive mp4-video]可能的副本（http://stackoverflow.com/questions/26040136/bootstrap-3-responsive-mp4-video） – NeosFox

嘗試在樣式添加

h3.main 
{ 
position:relative; 
z-index:1; 
} 
video 
{ 
width:100%; 
}

來源

2015-12-15 07:11:08

視頻響應快，但文本和按鈕不是不幸的 –

您的文本和按鈕已位於中心位置並且響應您的要求 –

文本和按鈕不響應。這是它看起來像：http://imgur.com/a/yWWdl –

好了你給的.video-container靜態高度。使其高度爲100%。之後，抓住你的video元素，並給它一個min-width和max-width的100%。 Yo可能還需要將max-width屬性添加到video並將其設置爲100%。您也可以使用width和height的100%而不是使用min-width和min-height。看看有什麼用，並創建一個小提琴。

.video-container { 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    height: 700px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
video { max-width: 100%; min-width: 100%; min-height: 100%; }

來源

2015-12-15 07:26:43

Bootstrap視頻背景未響應（不縮放）

回答

相關問題