使用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类.embed-responsive已经拥有属性position: relative;

DEMO：

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