全屏 HTML5 视频答案

【问题标题】：Full screen HTML5 Video全屏 HTML5 视频
【发布时间】：2014-08-19 00:15:58
【问题描述】：

我已经看遍了，还没有找到一个很好的解决方案。我正在尝试实现全屏响应式视频。这是网站的具体结构。

固定标题

标头 - 有全屏视频

主要 - 5 个子部分，全屏

页脚

因此，标头广告是一个 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 解决方案，我不反对。

【问题讨论】：

标签： css html video html5-video

【解决方案1】：

由于您将高度设置为自动，因此视频似乎超出了页面的高度，这会覆盖之前的 height:100%。反过来做呢？

video {     
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100%;
    width: auto;
    z-index: -100;
    overflow: hidden;
}

当然，这样会出现问题，在宽度大于高度的显示器中，会有一个区域没有被视频覆盖。也许您可以编辑两个版本的视频，一个用于垂直显示，一个用于水平显示，然后使用 css 中的 @media 查询或 jquery 加载适当的一个。

【讨论】：