我正在尝试使视频背景具有响应性。 我不想在显示播放和停止底部的地方嵌入 YouTube 视频。我只想让视频像背景一样自然播放。 现在的问题是它似乎没有完全响应。我在 css 和 html 中都将宽度设置为 100%。
这是我在互联网上发现的随机站点的一个示例，它在我尝试创建时具有响应式视频 http://www.mirumagency.com/hong-kong
#header-video {
background: none;
width: 100%;
}
#header-video .page-header {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
z-index: 3;
}
#header-video .page-header h1 {
margin: 0;
font-size: 42px;
}
#header-video .page-header small {
margin: 0 0 20px;
font-size: 24px;
}
#header-video .page-header small:nth-of-type(2) {
margin-top: 15px;
}
#header-video:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
display: block;
z-index: 1;
}
@media (max-width: 367px) {
#header-video .full-height black-wrapper{
max-width: 367px;
}}<body>
<!-- video header plugin & documentation here: http://vodkabears.github.io/vide/ -->
<div id="header-video"
class="full-height black-wrapper"
style="width: 100%; height: 500px;"
data-vide-bg="mp4: style/video/footage, webm: style/video/footage, ogv: style/video/footage, poster: img/front.png"
data-vide-options="position: 0% 50%">
<!-- replace the above options with your own -->
<div class="bar left-bar"></div>
<div class="bar right-bar"></div>
<div class="bar bottom-bar"></div>
<!--<a id="down-link" href="#"><i class="icon-mouse"></i></a> -->
</div>
<!-- end the video header -->
</body>
</html>最佳答案
试用 FitVids.JS .它可能对您有所帮助。
关于html - 如何使背景视频响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34575930/