Background color in my div container overrides the video element

问题: 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 shoul...

问题:

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

回答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>

  • 发表于 2020-06-27 21:50
  • 阅读 ( 161 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除