文本不显示在视频循环中

Question

下面的例子我做错了什么？我正在尝试在 div 中创建一个视频循环，并在其顶部显示文本。感谢任何帮助。

HTML:

<div class="clouds">
<video width="600" height="200" autoplay="autoplay" loop="loop" preload>
<source src="http://www.eclarify.com/videos/background.mp4" type="video/mp4" >
<source src="http://www.eclarify.com/videos/background.ogg" type="http://leongaban.com/video/ogg" >
<source src="http://www.eclarify.com/videos/background.webm" type="video/webm" >
<object data="http://www.eclarify.com/videos/background.mp4" width="1920" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="true" >
<param name="loop" value="true" >
<embed src="http://www.eclarify.com/videos/background.swf" width="1920" height="1080" wmode="transparent" >
</object>
</video> 

<div class="content">
   <h1>Hello There</h1>
</div>

</div>

CSS:

body {
  margin:0;
  padding:0;

}

div.clouds {
    margin:0 auto;
    width:100%;
    height:200px;
    overflow: hidden;

}

div.content h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index:100;
}


div.clouds video, div.clouds object, div.clouds embed {
    /*width: 100%;*/
    width: 2000px;
    height: auto;
    min-width: 720px;
    margin: 0 auto;  
    z-index:-1500;
}

Answer 1

给你伙计

https://codepen.io/facetimechat/pen/ZYJPjM

当您需要将一个元素叠加在另一个元素上时。您通常必须让第二个元素处于绝对位置，并将其相应地定位到您想要的位置。所以在这种情况下

div.content h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index:100;
  
  /* this will bring your content up */
  position:absolute;
  top:0;

}

文本不显示在视频循环中

Text not showing over video loop

html

css

html5-video