Question

我正在尝试复制X主题Integrity 1上使用的着陆页，但我遇到了一个难以找到一种方法来保持视频全屏并聚焦在中心而不是整个背景。我试过了：

<style type="text/css">

        body {margin: 0; padding: 0; background-color: green;}

        #landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}

        video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}


</style>

<body>
        <div id="landing">
            <video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
            <span id="welcome">DISCOVER NATURE'S SECRETS</span>
        </div>
</body>

当浏览器处于全屏状态时，它的工作非常完美，但在缩小页面时，着陆视频不会按照X主题演示的响应进行响应。我打算按照演示放置我的导航栏并向下滚动，这就是为什么背景选项无法实现的原因。

任何帮助/建议都将得到充分的理解。

Answer 1

他们已经使用了一些JavaScript，但有一种方法可以在没有JS的情况下使用它。

将video样式更改为：

video {
  // Force video to cover screen
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

  // Center video
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

尝试使用CSS创建视频着陆页

1 个答案: