全屏HTML5视频
全屏HTML5视频
提问于 2014-06-28 03:23:37
我已经找遍了，还没有找到一个很好的解决方案。我正在尝试实现一个全屏，响应式的视频。以下是该网站的具体结构。
固定报头
报头-有全屏视频
Main -5个子部分，全屏
页脚
因此，Masthead是一个div，它包含一些文本和视频本身，它被设计为占据屏幕宽度和高度的100%。此div需要具有响应性，并随页面进行缩放。
目前，我有一个解决方案，可以填满页面，但当页面变得太宽时，它会扩展到超出页面的高度，这是不理想的。有人有解决这个问题的办法吗？
我看过“全屏背景视频”链接，但这些链接实际上将其视为页面背景，并将视频固定到视区，这不是这里需要发生的事情。
这是我的代码。
HTML
<div id="masthead">
<div class="masthead-intro">
<h1>We are a Community for Good</h1>
<h3>Curabitur dignissim elemen tum ante pellentesque rhoncus.<br>
Viva muse rutrum felis id risus tris tique, ut congue orci.</h3>
</div>
<video src="/video/PCL_BornDreamersShortForm.mp4" poster="img/masthead-video.png" autoplay loop muted></video>
</div>和CSS
#masthead {
margin-top: $baseline*3;
position: relative;
margin-bottom: $mobile-baseline*3;
max-height: 100vh;
@include respond-to-min($break-medium) {
margin-bottom: $baseline*3;
margin-top: 0;
}
video {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
height: auto;
z-index: -100;
overflow: hidden;
}
}我不反对jquery或javascript解决方案，如果有人有的话。
回答 1
Stack Overflow用户
发布于 2014-06-29 17:15:33
视频似乎超出了页面的高度，因为您将height设置为auto，这会覆盖之前的height:100%。反之亦然呢？
video {
position: fixed;
top: 0;
left: 0;
min-height: 100%;
width: auto;
z-index: -100;
overflow: hidden;
}当然，这会有一个问题，在宽度大于高度的显示器中，将会有一个视频没有覆盖的区域。也许您可以编辑视频的两个版本，一个用于垂直显示，另一个用于水平显示，并使用css或jquery中的@media查询加载适当的版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24459402
复制相关文章
相似问题
腾讯云开发者
