html - Get div to cover an video element

Question

I am trying to get a div element to cover a video element.

But at the moment, it only partially covers the video element, I've attached a picture of this below despite me using the dynamically calculated height of the video element's outside container.

Moreover, when the viewport is resized, the div goes out of sync (size wise) with the video.

How do I fix it so that the div element perfectly covers the video element?

I've made a Stackblitz of the code here: https://stackblitz.com/edit/angular-ivy-d9fkdy.

HTML

<div class="course-content-video-container" #courseContentVideoContainer>
  <div
    class="course-content-video-container-cover"
    [ngStyle]="courseContentVideoContainerStyle"
  ></div>
  <video #courseContentVideoMedia width="100%">
    <source [src]="courseContentVideoUrl" type="video/mp4" />
  </video>
</div>

CSS

.course-content-video-container {
  background-color: #f1f3f4;
  border: 2px solid transparent !important;
  padding-top: 7px;
  padding-left: 7px;
  padding-right: 7px;
  height: 100%;
  width: 100%;
}

.course-content-video-container:hover {
  cursor: pointer;
  border: 2px solid #00d9e1 !important;
  transition: all 0.2s ease-in;
}

.course-content-video-container-cover:hover {
  cursor: pointer;
}

.course-content-video-container-active {
  background-color: #f1f3f4;
  border: 2px solid #00d9e1 !important;
  padding-top: 7px;
  padding-left: 7px;
  padding-right: 7px;
}

.course-content-video-container-active .icon-badge {
  position: relative;
  float: left;
  margin-left: -2px;
  padding-top: 2px;
  margin-top: -10px;
  bottom: 0;
  left: 100%;
  z-index: 10;
  margin-bottom: -50px;
}

Angular Code

import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostListener,
  ViewChild,
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild("courseContentVideoContainer")
  courseContentVideoContainer: ElementRef;
  courseContentVideoContainerStyle: unknown;
  courseContentVideoUrl: string =
    "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4";

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  @HostListener("window:resize")
  onResize(): void {
    this.setCourseContentVideoContainerStyle();
  }

  ngAfterViewInit(): void {
    this.setCourseContentVideoContainerStyle();
  }

  setCourseContentVideoContainerStyle() {
    this.courseContentVideoContainerStyle = {
      position: "absolute",
      backgroundColor: "red",
      opacity: "0.5",
      zIndex: "10",
      width: this.courseContentVideoContainer.nativeElement.offsetWidth + "px",
      height:
        this.courseContentVideoContainer.nativeElement.offsetHeight + "px",
    };
    this.changeDetectorRef.detectChanges();
  }
}

question from:https://stackoverflow.com/questions/66055994/get-div-to-cover-an-video-element

Answer 1

"But at the moment, it only partially covers the video element, I've attached a picture of this below despite me using the dynamically calculated height of the video element's outside container."

Actually, you should be using getBoundingClientRect to take into account viewport zooming and css scaling. ref

this.courseContentVideoContainer.nativeElement.getBoundingClientRect().width