如何在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.

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

尝试在 .ts 中将玩家身高更改为 80vh，但没有成功。可能打字稿只接受值。
尝试创建具有所需高度的 .css class，但没有成功。

css:

.player {
    height: 80vh;
}

html:

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

Answer 1

试试这个：

您的 div 有 2 个 class 名称和一个 ID...所以要在 CSS 中具体说明您有多个 classes and/or ID需要进行特定调用。

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

您的 CSS 调用应该如下所示

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

告诉我这是怎么回事。

如何在Angular2中调整YouTubePlayer的高度

How to adjust the height of YouTubePlayer in Angular2

html

css

youtube

youtube-javascript-api

angular