在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中的视频标题

回答

相关问题