在HTML和CSS中的視頻標題

我正在創建一個網頁，應該有一個視頻標題在伸展到屏幕上，但只顯示80％，如果高度，然後把文本里面標題。在HTML和CSS中的視頻標題

我已經成功地獲得了視頻循環並伸展到屏幕的寬度，並且只顯示80％的屏幕高度，只顯示80％的屏幕高度。

我沒有成功通過使用「z-index」標題將文本放在標題上，因爲我在視頻上使用「position：inherit」，它在我設置「position：absolute 「但是，然後視頻顯示超過它應該！

這裏的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

總結單詞Hello入格，然後給該分區位置絕對的，把它放在任何你想要的。

來源

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中的視頻標題

回答

相關問題