フルスクリーンビデオの問題

-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

あなたは、ヘッダと、ビデオやビデオのためのheight:100vhの両方にposition:absoluteを使用しました。その部分は問題を作り出しています。高さを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

フルスクリーンビデオの問題

答えて

関連する問題