我是一个初学者学习代码，我正在尝试克隆一个Netflix登录页面。

有一个部分，我必须在电脑图像内播放视频。 我试着把视频放进了电脑。 但是当我甚至尝试使用Z-索引使图像的某些部分覆盖在视频上时，它并没有像预期的结果那样工作。 如果我遗漏了什么，请告诉我。

图片链接:https://assets.nflxext.com/ffe/siteui/acquition/ourstory/fuji/desktop/device-pile-in.png

视频链接:https://assets.nflxext.com/ffe/siteui/acquition/ourstory/fuji/desktop/video-devices-in.m4v

应为:https://i.imgur.com/egv9qyz.mp4

我的输出是:https://i.imgur.com/oujuxrb.gifv

HTML

 <div class="section-tv-container">
      <section class="section-tv">
        <div class="tv-feature-text">
          <h1>Watch everwhere.</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">
            <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>
      </section>

CSS:

.section-tv-container {
  border-top: 8px solid #222;
  height: 48.2rem;
  background: #000;
  border-bottom: 8px solid #222;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}


.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 {
  background: url("https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile-in.png");
  width: 400px; /* Adjust TV image width */
  height: 35.8rem; /* Adjust TV image height */
  position: relative;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  /* z-index: 100; */
  object-fit: contain;
  margin-right: 30px;
}

.tv-video2 {
  display: inline-block;
  vertical-align: baseline;
  position: absolute;
  right: 90px;
  bottom: 120px;
  z-index: 3;
}