html - 使用 bootstrap 和 Angular 6 在视频上叠加层

Question

我正在使用 Angular 6 和 Bootstrap 来尝试让图像和一些文本“出现”在视频元素上。我已经得到了大部分我正在寻找的工作，除了我不能完全让叠加层的“对齐”与视频元素对齐。相反，它似乎与整体“页面”保持一致。我已经尝试了很多东西(删除 col 和 row 类，更改覆盖在代码中的位置，编写自定义类等。但在这上面折腾了很长一段时间后，我认为我的知识差距阻碍了我从实现它。

这是组件的 html 和 css...任何建议将不胜感激。

#overlay {
  position: absolute;
  /* Sit on top of the page content */
  display: display;
  /* Hidden by default */
  width: 50%;
  /* Full width (cover the whole page) */
  height: 50%;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(58, 57, 57, 0);
  /* Black background with opacity */
  z-index: 2;
  /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer;
  /* Add a pointer on hover */
}

<div class="row">
  <div class="col-md-12"></div>
  <div class="embed-responsive embed-responsive-1by1 m-0 p-0">
    <video src="" class="embed-responsive-item" #video id="video" autoplay></video>
  </div>

  <div class="col-md-12" id="overlay" *ngIf="showRobot">
    <img src="https://firebasestorage.googleapis.com/v0/b/ezar-77f5e.appspot.com/o/roboguide3.png?alt=media&token=54655d7b-2cc1-41f4-8c2c-a7855db849f9" alt="" class="w-25" />
    <p>The result is: {{ myString }}</p>
  </div>
</div>

Answer 1

具有position: absolute 的元素的位置取决于具有相对定位的第一个父元素。

所以你应该尝试这样的事情:

HTML:

  <div class="row">
    <div class="col-md-12">
      <div class="embed-responsive embed-responsive-1by1 m-0 p-0">
        <video src="" class="embed-responsive-item" #video id="video" autoplay></video>
        <div class="overlay-video" *ngIf="showRobot">
          <img src="https://firebasestorage.googleapis.com/v0/b/ezar-77f5e.appspot.com/o/roboguide3.png?alt=media&token=54655d7b-2cc1-41f4-8c2c-a7855db849f9" alt="" class="w-25" />
          <p>The result is: {{ myString }}</p>
        </div>
      </div>
    </div>
  </div>

CSS:

.overlay-video{
  position: absolute;
  background-color: rgba(58, 57, 57, 0.8);
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
  text-align: center;
}

注意 bootstrap 4 css class .embed-responsive 已经有属性 position: relative;

演示:

https://plnkr.co/edit/8G8SQUia5FAZHpVygD2Q?p=preview