Video Hero Issue with Bootstrap Rows

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/

score 1 · Accepted Answer · edited May 23 '17 at 11:43

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.

Video Hero Issue with Bootstrap Rows

1 Answers1