Markdown 語法中嵌入 YouTube 的方式

持續熟練 Markdown 語法

前言

以往使用 Markdown 的時候都是在紀錄自己的學習筆記或是寫文件上，但近期發現寫部落格的時候，可能會需要嵌入 YouTube 影片，雖然說在 VitePress 當中直接使用 iframe 的方式也可以，但既然都用 Markdown 語法了，就來用 Markdown 語法來達成嵌入 YouTube 影片的方式。

YouTube 獲取影片縮圖的 API URL

在說明如何嵌入 YouTube 影片之前，先來說明如何獲取 YouTube 影片的縮圖，以下是 YouTube 影片縮圖的 API URL：

1. URL 結構： https://img.youtube.com/vi/VIDEO_ID/0.jpg

2. 組成部分：

• https://img.youtube.com/vi/：固定部分，表示這是 YouTube 影片縮圖的 API URL。
• VIDEO_ID 是 YouTube 影片的 ID，需要替換成特定 YouTube 影片的唯一識別碼。
• /0.jpg 這指定了要獲取的縮圖類型。

3. 縮圖類型：

• /0.jpg：預設的縮圖（通常是影片的中間幀）
• /1.jpg, /2.jpg, /3.jpg：影片中的其他幀
• /default.jpg：標準品質縮圖
• /hqdefault.jpg：高品質縮圖
• /mqdefault.jpg：中等品質縮圖
• /sddefault.jpg：標準清晰度縮圖
• /maxresdefault.jpg：最高解析度縮圖（如果可用）

以這個影片為例：

這部影片的網址為 https://www.youtube.com/watch?v=dQw4w9WgXcQ，屬於這部影片的 ID 為 dQw4w9WgXcQ （watch?v= 之後的內容） 所以縮圖的 URL 為 https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg （這邊取用 maxresdefault.jpg 的縮圖）

在 Markdown 語法中嵌入 YouTube 影片

1. 在 Markdown 語法中嵌入 YouTube 影片的語法如下：

[![圖片替代文字](https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg)](https://www.youtube.com/watch?v=VIDEO_ID)

2. 將 VIDEO_ID 替換成實際的 YouTube 影片 ID，例如：

[![Rick Astley - Never Gonna Give You Up (Official Music Video)](https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

3. 這樣就可以在 Markdown 語法中嵌入 YouTube 影片了。

結語

這邊要說一下 Markdown 語法嵌入 YouTube 影片的小缺點，相信文章看到這邊的朋友們都有發現到，上面範例嵌入的影片縮圖就少了我們平時瀏覽網站熟悉的 YouTube 的 UI，這是因為我們在 Markdown 語法中嵌入的影片縮圖是直接從 YouTube 的 API 獲取的，所以沒有包含 YouTube 的 UI。

如果使用的筆記軟體或是部落格平台有支援 iframe 的方式嵌入的話，就看各位怎麼去取捨使用囉。