CODEWITHSUNDEEP
htmlcsshtml5-video
NewB
NewB

Reputation: 125

Text not showing over video loop

What am I doing wrong with the following example? I'm attempting to create a video loop within a div and have text appear on top of it. Any help is appreciated.

CodePen: http://codepen.io/anon/pen/vEJPRO

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;
}

Upvotes: 0

Views: 982

Answers (1)

John
John

Reputation: 516

Here you go buddy

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

When you need to overlay one element over another. You usually have to have the second element in absolute position, and position it accordingly to where you want. So in this case

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;

}

Upvotes: 3

Related Questions