css - 如何在Angular2中调整YouTubePlayer的高度

Question

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

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

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

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

因为这样我就可以根据视口(viewport)高度调整尺寸。我希望它是 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;
}

让我知道这会发生什么。