我遇到了這個問題。
我想在一個頁面中嵌入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屬性。