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

Question

我正在尝试使用引导程序来制作我的个人网站，并在后台播放视频。当我缩小浏览器窗口时，视频、标题占位符和按钮都不会缩放（不响应）。我不知道怎么了。任何帮助都会很有用。非常感谢！

这是我的 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;
}

Answer 1

好的，你给.video-container 一个静态高度。使其高度为 100% 。之后抓住你的 video 元素并给它一个 min-width 和 max-width 的 100% 。你可能还需要将max-width 属性添加到video 并将其设置为100%。您也可以使用100% 中的width 和height，而不是使用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%; }

Answer 2

尝试添加样式

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