Solution 1 :

Your <video> element should be nested inside the .monitor div element as shown in the following Code Snippet:

.section-tv-container {
  border-top: 8px solid #222;
  height: 48.2rem;
  background: rgb(0, 0, 0);
  border-bottom: 8px solid #222;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: -400;
}


.section-tv {
  height: 32.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: auto;
}


.tv-feature-text h1 {
  font-size: 5rem;
  width: 41.4rem;
}

.tv-feature-text h2 {
  margin-top: 20px;
  font-size: 2.6rem;
  width: 51.2rem;
  font-weight: 400;
}


.tv-container2 {
  position: relative;
}

#tv_container {
  width: 600px;
  height: 450px;
  position: relative;
}

.monitor {
  width: 100%;
  height: 100%;
  background-image: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile-in.png");
  background-position: center;
  background-size: cover;
}
<div class="section-tv-container">
  <section class="section-tv">
    <div class="tv-feature-text">
      <h1>Watch everywhere.</h1>
      <h2>
        Stream unlimited movies and TV shows on your phone, tablet, laptop,
        and TV.
      </h2>
    </div>
    <div class="tv-container2">
      <div id="tv_container">
        <div class="monitor">
          <video class="tv-video2" autoplay="" playsinline="" muted="" loop="" width="300" height="240">
            <source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices-in.m4v"
                    type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  </section>
</div>

Problem :

I am trying to make a Netflix clone. I am struck with small issue. I have background color black in my div container. It is supposed to be only a background color, it shouldn’t override my other element. I have a video element above the container. My problem is background color in my container affects the video element and video playing in the background is hidden under the black color.

What am I missing? I even tried to use z-index in the container. But its not working either. Thank you!!

My problem: https://i.imgur.com/c5cqzwy.gifv

<div class="section-tv-container">
    <section class="section-tv">
      <div class="tv-feature-text">
        <h1>Watch everywhere.</h1>
        <h2>
          Stream unlimited movies and TV shows on your phone, tablet, laptop,
          and TV.
        </h2>
      </div>
      <div class="tv-container2">
        <div id="tv_container">
          <div class="monitor"></div>
          <video class="tv-video2" autoplay="" playsinline="" muted="" loop="" width="300" height="240">
            <source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices-in.m4v"
              type="video/mp4" />
          </video>
        </div>
    </section>

CSS

.section-tv-container {
  border-top: 8px solid #222;
  height: 48.2rem;
  background: rgb(0, 0, 0);
  border-bottom: 8px solid #222;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: -400;
}


.section-tv {
  height: 32.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: auto;
}


.tv-feature-text h1 {
  font-size: 5rem;
  width: 41.4rem;
}

.tv-feature-text h2 {
  margin-top: 20px;
  font-size: 2.6rem;
  width: 51.2rem;
  font-weight: 400;
}


.tv-container2 {
  position: relative;
}

#tv_container {
  width: 600px;
  height: 450px;
  position: relative;
}

.monitor {
  width: 100%;
  height: 100%;
  background-image: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile-in.png");
  background-position: center;
  background-size: cover;
  z-index: 30;
}

Comments

Comment posted by Jacob Lockard

Did you try adding a separate, white background to the video?

Comment posted by darkknight_dev

Yes. White background overrides the video element.

By

Leave a Reply

Your email address will not be published. Required fields are marked *