如何在Angular2中調整YouTubePlayer的高度

我在使用Angular2開發的我的網站中嵌入了一個YouTube視頻。我創建了一個稱爲video-player一小部分，這和我發起玩家.ts如下：如何在Angular2中調整YouTubePlayer的高度

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

正如你看到的，我控制玩家的高度.ts本身。我可以在.css中控制此高度嗎？

爲什麼我想控制高度.css？

因爲然後我可以根據視口高度調整大小。我希望它是80vh。

到目前爲止我試過了什麼？

試圖改變玩家高度80vh在.ts，但沒有奏效。可能打字稿只取值。
試圖創建以下.css類與期望的高度，但沒有奏效。

CSS：

.player { 
    height: 80vh; 
}

HTML：

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

來源

2017-08-14 Sonu Mishra

當你使用'height：「80％」'時會發生什麼？ –

任何百分比「0-800％」似乎都沒有任何效果。玩家的身高會變得很小。 –

試試這個：

您的div有2類名和一個ID ......所以要具體與CSS您需要多個類和/或ID來進行特定的呼叫。

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

你的CSS調用應該是這個樣子

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

讓我知道這個會發生什麼。

來源

2017-08-14 02:07:05

根本沒有效果。從0-120vh改變高度。它很固執。 :( –

對不起，CSS部分看起來像是一個遺漏類型： '＃video-player.aspect-ratio' 另外，你有沒有考慮將它設置爲另一個div設置該div的大小爲你想要的和離開視頻播放器div在.ts文件中的高度和寬度100％？ –

添加另一個div工作。非常尷尬，我想不起自己！：P –

如何在Angular2中調整YouTubePlayer的高度

回答

相關問題