Currently, I am utilizing Angular 6 and Bootstrap in an attempt to display an image along with some text on top of a video element. While most of the functionality is working as expected, I am facing an issue with aligning the overlay properly with the video element. Instead of aligning with the video, it seems to be aligning with the entire page. Despite various attempts such as removing col and row classes, adjusting the position of the overlay within the code, and creating custom classes, I have been unable to resolve this issue. It appears that there may be a gap in my understanding preventing me from achieving the desired result after spending a significant amount of time debugging.
Below, you will find the HTML and CSS for the component. Any guidance or suggestions would be greatly appreciated.
#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>