Получение наложения на видео для работы с использованием начальной загрузки и Angular 6 - PullRequest
Новая
       11

Получение наложения на видео для работы с использованием начальной загрузки и Angular 6

0 голосов
/ 01 марта 2019

Я использую 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>

1 Ответ

0 голосов
/ 01 марта 2019

Положение элемента с 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;
}

Обратите внимание, что класс начальной загрузки 4 css .embed-responsive уже обладает свойством position: relative;

DEMO:

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

...