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;
}