Question

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

固定标题

标头广告 - 拥有全屏视频

主要 - 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解决方案，如果有人有。

Answer 1

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

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

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

全屏HTML5视频

1 个答案: