如何使用正確的比例嵌入YouTube視頻
我遇到了這個問題。 我想在一個頁面中嵌入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屬性。