Video Hero Issue with Bootstrap Rows - css

Question

I have a hero video on a page I am building hover I am having an issue with my Bootstrap row that comes after the video being positioned underneath the hero. I know it has to do something with positioning but I can't seem to get it right. Any ideas how to fix this so that everything stacks correctly?
<div class="row-hero-container">
<div class="row-fluid row-hero">
<div class="video-holder gradient-overlay video-wrapper">
<video autoplay loop muted>
<source src="http://www.w3schools.com/tags/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
<img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>
</div>
</div>
<div class="container row-hero-overlay text-center">
<div class="row">
<div class="col-md-12 row-hero-info">
<h1 class="row-hero-title">Headline in Video.</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-about">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
JS Fiddle
http://jsfiddle.net/n3hqpgnw/

Answer 1

Looks like you could do it two ways here.
Just add some margin to the Top
.row-about {
background-color: black;
height: 500px;
border-top: 2px solid grey;
margin-top:1%; /* can use this to clear from above */
}
Or add some margin to the Bottom. Also I used position:relative; here to.
.video-holder {
position: relative;
width: 100%;
margin-bottom:0%; /* can use this to clear from below */
top: 0;
left: 0;
opacity: 0.8;
}
The Fiddle is here, I just turned of the red shading so it was clear to work with.
Here is a good looking video background that we helped with just the other day.
The Fiddle.
The post link.