開發者

如何在網站嵌入 YouTube 影片（自適應）

嵌入能適應各種螢幕的 YouTube 影片：分享選單、自適應程式碼、開始時間、隱私強化模式、WordPress 以及加速技巧。

作者： Free Thumbnail Downloader 團隊 2 分鐘閱讀
文章封面: 如何在網站嵌入 YouTube 影片（自適應）
本文目錄
  1. 快速方法：YouTube 分享選單
  2. 更好的方法：自適應嵌入程式碼
  3. 常用參數
  4. 隱私強化模式
  5. WordPress
  6. 維持頁面速度
  7. 查找影片 ID

嵌入影片能讓訪客不離開你的頁面就觀看 YouTube 影片。YouTube 提供的程式碼可以用，但尺寸固定，可能在手機上撐破版面。以下是正確做法。

快速方法：YouTube 分享選單

  1. 在影片下方點選分享 → 嵌入。
  2. 如有需要，勾選開始時間。
  3. 複製 <iframe> 程式碼，貼到網頁 HTML 中。

預設程式碼使用 width="560" height="315"，在小螢幕上可能超出範圍。

更好的方法：自適應嵌入程式碼

這個版本永遠填滿容器寬度，並維持 16:9 比例：

<iframe
  style="width:100%;aspect-ratio:16/9;border:0"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="YouTube 影片播放器"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

我們的嵌入程式碼產生器可為任何影片產生這段程式碼，並透過勾選框加入選項。

常用參數

參數作用
start=90從 1:30 開始
end=150在 2:30 停止
autoplay=1&mute=1自動播放（必須靜音）
loop=1&playlist=VIDEO_ID重複播放
controls=0隱藏控制列
cc_load_policy=1預設顯示字幕

把它們加在影片 ID 後面，第一個用 ?，其餘用 & 分隔，例如 .../embed/VIDEO_ID?start=90&mute=1。

隱私強化模式

用 youtube-nocookie.com 取代 youtube.com，YouTube 在訪客按下播放前不會儲存他們的資訊。對部落格和重視隱私的網站來說，這是很好的預設選擇。

WordPress

在區塊編輯器中加入自訂 HTML 區塊並貼上程式碼。如果只是簡單嵌入、不需要選項，也可以把影片連結單獨放一行，WordPress 會自動產生播放器。

維持頁面速度

每個嵌入播放器都會載入額外的指令碼。頁面上有多部影片時：

  • 保留 loading="lazy"，讓播放器在訪客捲動到附近時才載入。
  • 考慮用附連結的縮圖取代完整播放器。縮圖網址的格式請見我們的縮圖 URL 指南，圖片可以用縮圖下載器取得。

查找影片 ID

ID 是 v= 或 youtu.be/ 後面的 11 個字元。如果連結很多，影片 ID 擷取工具可以一次全部取出。

常見問題

為什麼嵌入的影片不能有聲音地自動播放？

瀏覽器會封鎖有聲自動播放。只有靜音時才能自動播放，所以要同時加上 mute=1 和 autoplay=1。

所有 YouTube 影片都能嵌入嗎？

大多數公開影片可以，但上傳者可以關閉嵌入。這時播放器會顯示提示和前往 YouTube 觀看的連結。

幾秒鐘取得任何 YouTube 縮圖

貼上連結，下載所有可用尺寸，最高 1280×720。

開啟下載器
Free Thumbnail Downloader 團隊

我們為 YouTube 創作者打造簡單又快速的工具，並根據親自測試的結果撰寫教學。

延伸閱讀