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

能否请您创建小提琴？ –

@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%; 
}

视频响应快，但文本和按钮不是不幸的 –

您的文本和按钮已位于中心位置并且响应您的要求 –

文本和按钮不响应。这是它看起来像：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%; }

Bootstrap视频背景未响应（不缩放）

相关推荐