/

如何使用正確的比例嵌入YouTube視頻

如何使用正確的比例嵌入YouTube視頻

我遇到了這個問題。

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

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

使用React和Tailwind的代碼：

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

不使用React的Tailwind代碼：

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

純HTML和CSS：

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

YouTube嵌入URL的格式如下：

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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屬性。

tags: [“YouTube”, “視頻”, “iframe”, “CSS”, “HTML”, “Tailwind”, “React”]