获取 div 以覆盖视频元素答案

【问题标题】：Get div to cover an video element获取 div 以覆盖视频元素
【发布时间】：2021-05-09 08:46:17
【问题描述】：

我试图让一个 div 元素覆盖一个视频元素。

但目前，它仅部分覆盖了视频元素，尽管我使用了视频元素外部容器的动态计算高度，但我在下面附上了一张图片。

此外，当调整视口大小时，div 与视频不同步（大小方面）。

如何解决，让 div 元素完美覆盖视频元素？

我在这里制作了代码的 Stackblitz：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;
}

角度代码

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

【问题讨论】：

标签： html css angular

【解决方案1】：

“但目前，它仅部分覆盖了视频元素，尽管我使用了视频元素外部容器的动态计算高度，但我在下面附上了一张图片。”

实际上，您应该使用getBoundingClientRect 来考虑视口缩放和css 缩放。 ref

this.courseContentVideoContainer.nativeElement.getBoundingClientRect().width

【讨论】：

这似乎不起作用，我试了一下：stackblitz.com/edit/angular-ivy-d9fkdy。
@methuselah 它在 Stackblitz 中为我正确且准确地调整大小？我在 Mac OS 上使用 Chrome 吗？

【解决方案2】：

尝试如下使用：

在css的帮助下，我们继承了父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 演示：https://stackblitz.com/edit/angular-ivy-rcx7zg?file=src/app/app.component.css

【讨论】：