全屏視頻問題

-1

該視頻似乎工作完全罰款全屏。唯一的問題是我看不到我的標題。看起來，視頻正在趕超他們。我只想看到標題，當我從視頻中向下滾動時。全屏視頻問題

有誰知道解決方案？

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 
    
 
    header { 
 
     position: absolute; 
 
     width: 100vw; 
 
     height: 100vh; 
 
     top: 0; 
 
     left: 0; 
 
     background: transparent; 
 
     z-index: 1; 
 
    } 
 
    
 
    video { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     -o-object-fit: cover; 
 
     object-fit: cover; 
 
    }

<body> 
 

 

 
    <header> 
 

 

 

 

 
     <video poster="messi.jpg" autoplay="true" loop> 
 
      <!-- <source src="ships.mp4" type="video/mp4"> --> 
 
      <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4"> 
 
     </video> 
 

 

 
    </header> 
 

 
    <h1>test</h1> 
 
    <h1>test</h1> 
 
    <h1>test</h1> 
 
    <h1>test</h1> 
 

 

 

 

 
</body>

來源

2017-07-19 Sebbe77

您已經使用position:absolute兩個頭和視頻height:100vh視頻。這部分正在造成問題。將高度更改爲100％，位置：相對。

* { 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
     overflow-x:hidden; 
 
    } 
 
    
 
    header { 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100%; 
 
     top: 0; 
 
     left: 0; 
 
     background: transparent; 
 
     z-index: 1; 
 
    } 
 
    
 
    video { 
 
     position: relative; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     -o-object-fit: cover; 
 
     object-fit: cover; 
 
    }

<body> 
 

 

 
    <header> 
 

 

 

 

 
     <video poster="messi.jpg" autoplay="true" loop> 
 
      <!-- <source src="ships.mp4" type="video/mp4"> --> 
 
      <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4"> 
 
     </video> 
 

 

 
    </header> 
 

 
    <h1>test</h1> 
 
    <h1>test</h1> 
 
    <h1>test</h1> 
 
    <h1>test</h1> 
 

 

 

 

 
</body>

來源

2017-07-19 21:04:51

它的工作原理，但讓我的瀏覽器的時候smaller..the視頻不是全屏了 – Sebbe77

當你改變窗口大小發生了什麼事？ –

視頻變得更小，不再適合全屏 – Sebbe77

全屏視頻問題

回答

相關問題