我正在尝试使用 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;
}
最佳答案
尝试添加样式
h3.main
{
position:relative;
z-index:1;
}
video
{
width:100%;
}
关于html - Bootstrap 视频背景无响应(不缩放),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34282776/