Adding content below jumbotron

Question

I have a HTML5 video playing within a jumbotron (Bootstrap 3), which works perfectly fine. Here is the HTML for it:

<div class="jumbotron" id="cover">
    <video id="video-background" preload autoplay>
        <source src="{% static 'videos/cover_video.mp4' %}" type="video/mp4" />
        Video cannot be played by your browser
    </video>
</div>

Corresponding CSS:

.jumbotron{
  position: fixed;
  z-index:-101;
  height: 100vh;
  width: 100%;
}

#video-background { 
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

I want to add some content below this jumbotron video, more specifically, a Bootstrap "row" class div. When I try to add the following code below .jumbotron div, it appears on the jumbotron video.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
    <div class="col-md-4">
      <h1>fjsfs</h1>
    </div>
  </div>
</div>

I have looked at other answers like this , but it didn't work for me. I am certain it has something to do with position: fixed; property of .jumbotron class, but it is required for the full screen video.

Any help would be appreciated!

Answer 1

You could attempt to put the jumbotron element inside a column and row of its own? Failing that mess around with the display and position attributes using !important to override them.

Hope this helps