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

我试图复制X主题Integrity 1上使用的着陆页，但我遇到了困难，想方设法将视频保持在整个屏幕上，并且没有使它成为中心整个背景。我曾尝试：尝试使用CSS创建视频着陆页

<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主题演示不响应的页面。我打算按照演示放置导航栏，并向下滚动，这也是背景选项无法使用的原因。

任何帮助/建议将深受赞赏。

来源

2017-08-15 ForeverYennefer

他们已经使用了一些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%); 
}

来源

2017-08-15 17:16:48

太谢谢你了！ – ForeverYennefer

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

回答

相关问题