Error with z-index on video not allowing buttons and text to be shown

My website is dommazzola.com

I have a video that automatically plays along with two action buttons and description that are suppose to display on top of the video. unfortunately, they are hiding behind the video.. The video and buttons (.description and .title) have different z-index's. The buttons seem to load at first, but then hide behind the video.

Here is my CSS file and HTML:

HTML

  <div class="homepage-hero-module">
  <div class="video-container">
    <div class="title-container">
      <div class="headline">
        <h1>Landscaping Taken Seriously</h1>
      </div>
      <div class="description">
        <div class="inner">Lexington Lawncare’s Landscaping has thrived because of a commitment to creating exceptional outdoor living environments.</div>
        <p><a class="btn btn-lg btn-success mt-2" href="#" role="button">Contact Us</a><span>  </span><a class="btn btn-lg btn-outline-success px-4 mt-2" href="#customer-logo-slider" role="button">Learn More</a></p>
      </div>
    </div>
    <div class="filter"></div>
    <!-- #TODO: NEED WEBM VIDEO FOR THIS TO WORK ON FIREFOX -->
    <video autoplay loop muted poster="static/images/slider12.jpg" class="fillWidth">
      <source src="https://d2cd6p07f07ng7.cloudfront.net/IMG_3036.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    </div>
  </div>

CSS

.homepage-hero-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 100%; /* was 100% */
  width: 100%;
  overflow: hidden;
  background: #000;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.video-container .filter {
  z-index: 100;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  margin-top: 32rem;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .headline {
  font-size: 3em; /* added */
}
.video-container .description .inner {
  font-size: 1.35em; /* was 1em */
  width: 50%; /* was 45% */
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}
.video-container video.fillWidth {
  width: 100%;
}

Solution

add this css

.video-container .title-container{
    position: relative;
}

result