CODEWITHSUNDEEP
htmlcssangular
methuselah
methuselah

Reputation: 13206

Get div to cover an video element

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

Upvotes: 1

Views: 438

Answers (2)

Msk Satheesh
Msk Satheesh

Reputation: 1536

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

Upvotes: 0

Zze
Zze

Reputation: 18805

"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

Upvotes: 1

Related Questions