如何在 Angular2 中调整 YouTubePlayer 的高度

Question

我正在将一个 youtube 视频嵌入到我的网站中，该视频是使用 Angular2 开发的。我为此创建了一个名为video-player 的小组件，并在.ts 中启动播放器，如下所示：

ngOnInit(): void {
this.player = YouTubePlayer('video-player', {
      videoId: this.videoPlayerData.videoURL,
      width: "100%",
      height: "400"
    });
}

如您所见，我正在控制.ts 本身的播放器高度。 .css可以控制这个高度吗？

我为什么要在.css中控制高度？

因为这样我可以根据视口高度调整大小。我希望它是80vh。

到目前为止我尝试了什么？

1. 尝试在.ts 中将播放器高度更改为80vh，但没有成功。可能 typescript 只接受值。
2. 尝试创建以下具有所需高度的 .css 类，但没有成功。

css:

.player {
    height: 80vh;
}

html:

<div class="aspect-ratio player" id='video-player'></div>

Answer 1

试试这个：

您的 div 有 2 个类名和一个 ID...所以要在具有多个类和/或 id 的 CSS 中具体说明，您需要进行特定调用。

<div class="aspect-ratio" id="video-player"></div>

您的 CSS 调用应如下所示

video-player.aspect-ratio {
  height: 80vh;
}

让我知道这会发生什么。