嘗試使用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創建視頻着陸頁

回答

相關問題