HTMLとCSSのビデオヘッダー

ビデオヘッダーがトップにあるウェブページを作成していますが、その上にスクリーン上に伸びているが高さが80％の場合はテキストを内側に入れますヘッダーHTMLとCSSのビデオヘッダー

私は、ビデオをループして幅に合わせて画面に伸ばして、画面の高さの80％のみをコンテンツの80％しか表示しないラップで囲んで表示することに成功しました。

ビデオで「position：inherit」を使用しているため、「z-index」ヘッダーを使用してヘッダーにテキストを挿入しようとすると成功しませんでした。 "しかし、ビデオはそれ以上のものを表示する！

は、ここでHTML

<div id="headerContent"> 
    <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop> 
     <source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4"> 
    </video> 
    Hello 
</div>

は、ここでCSS

#headerContent { 
    width: 100%; 
    height: 80%; 
    overflow: hidden; 
} 
video { 
    position: inherit; 
    min-width: 100%; 
    overflow: hidden; 
    z-index: -1; 
}

出典

2016-08-15 Edvin

は絶対そのdivの位置を与え、そしてあなたが好きな場所に置き、DIVにこんにちは単語を包んだています。

出典

2016-08-15 13:43:41 Vcasso

これは、それを解決する必要があり

<html> 
<head> 
<style> 
#headerContent { 
    width: 100%; 
    height: 80%; 
    overflow: hidden; 
    position: relative; 
} 

video { 
    position: inherit; 
    min-width: 100%; 
    overflow: hidden; 
    z-index: -1; 
} 

p { 
    position: absolute; 
    text-align: center; 
    font-size: 4em; 
    z-index: 9999; 
    color: white; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

</style> 
</head> 
<body> 
<div id="headerContent"> 
    <p> Hello </p> 
    <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop> 
     <source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4"> 
    </video> 
    </div> 
</div> 
</body> 
</html>

出典

2016-08-15 13:55:52

HTMLとCSSのビデオヘッダー

答えて

関連する問題