我正在尝试复制 X Theme 的 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 主题演示那样响应。我打算按照演示放置我的导航栏并向下滚动，这就是背景选项不可能的原因。
如有任何帮助/建议，我们将不胜感激。
最佳答案
他们为此使用了一些 JavaScript，但有一种方法可以不用 JS 来实现。
将您的视频样式更改为:
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%);
}
关于javascript - 尝试使用 CSS 创建视频登陆页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45697761/