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();
  }
}

score 1 · Accepted Answer · answered Feb 05 '21 at 01:40

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

answered Feb 05 '21 at 01:40

Zze

18,229
13
85
118

This is doesn't seem to work, I gave it a go at: https://stackblitz.com/edit/angular-ivy-d9fkdy. – methuselah Feb 05 '21 at 06:13
@methuselah It resizes correctly and accurately for me in that Stackblitz? I am using Chrome on mac OS ? – Zze Feb 05 '21 at 06:15

score 0 · Answer 2 · answered Feb 05 '21 at 05:20

Try Using as Follows:

with the help of css we inherit the width and height of parent div.

.course-content-video-container {
  position: absolute;
}

.course-content-video-container-cover {
  position: absolute;
  height: 200px;
  width: 400px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.course-content-video-container-cover video {
  position: absolute;
  height: inherit;
  width: inherit;
  vertical-align: top;
}

<div class="course-content-video-container">
    <div class="course-content-video-container-cover">
        <video>
            <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4" />
        </video>
    </div>
</div>

Stackblitz Demo : https://stackblitz.com/edit/angular-ivy-rcx7zg?file=src/app/app.component.css

Get div to cover an video element

2 Answers2