我遇到了這個問題。

我想在一個頁面中嵌入YouTube視頻,但由於需要使用iframe,我無法弄清如何正確地設置其高度和寬度,以在流動佈局中正常工作。

過了一段時間,我找到了解決方案。

使用React和Tailwind的代碼:

<iframe className="aspect-video w-full"
 src={"Youtube嵌入URL"}>
</iframe>

不使用React的Tailwind代碼:

<iframe class="aspect-video w-full"
 src="Youtube嵌入URL">
</iframe>

純HTML和CSS:

<iframe style="aspect-ratio: 16 / 9; width: 100%"
 src="YouTube嵌入URL"></iframe>

YouTube嵌入URL的格式如下:

https://www.youtube.com/embed/VIDEO_ID

因此,如果您有視頻URL,您需要將其更改為相應的格式,例如:

videourl.replace('https://www.youtube.com/watch?v=', 
 'https://www.youtube.com/embed/')

一些舊的教程仍然列出使用絕對/相對方式的技巧,例如:

<style>
.videocontainer {
 position:relative; 
 padding-bottom:56.25%;
}
.videocontainer iframe {
 width:100%;
 height:100%;
 position:absolute;
}
</style>

<div class="videocontainer">
 <iframe src="YouTube嵌入URL"></iframe>
</div>

我更偏愛更簡單的aspect-ratio屬性