修正 YouTube 影片循環播放的 iframe 參數設定技巧

前言

在網頁中嵌入 YouTube 影片時，若希望影片能夠無限循環播放，通常需要在 iframe 的 URL 中加入特定參數。這段程式碼解決了直接設定 loop 參數無法生效的問題，適合需要動態調整或修正第三方影片嵌入參數的前端工程師與自學者。

問題背景與解決方案

YouTube 的 iframe 影片循環播放並非只靠 loop=1 參數即可生效，還必須同時指定 playlist 參數為影片 ID。這段程式碼會自動偵測所有帶有 youtube-loop 類別的 iframe，並補上正確的 loop 與 playlist 參數。

取得並解析 iframe 的 src

程式碼先取得所有符合條件的 iframe，並將 src 中可能被轉譯的 & 轉回 &，確保 URL 正確解析。

const rawSrc = iframe.getAttribute('src');
const src = rawSrc.replace(/&/g, '&');

取得影片 ID

透過字串切割方式，從 src 中擷取影片 ID，這是設定 playlist 參數的關鍵。

const videoId = src.split('/embed/')[1]?.split('?')[0];

設定 loop 與 playlist 參數

利用 URL 物件操作，設定 loop=1 與 playlist=影片ID，並避免重複設定造成無限迴圈。

const url = new URL(src);
url.searchParams.set('loop', '1');
url.searchParams.set('playlist', videoId);
const newSrc = url.toString();
if (newSrc !== src) iframe.setAttribute('src', newSrc);

實務應用與優化建議

  • 此方法適合在頁面載入後或動態插入 iframe 後呼叫，確保所有影片都能正確設定循環播放。
  • 透過多次延遲呼叫（setTimeout）處理 builder 或 lazy load 產生的 iframe。
  • 若有大量 iframe，可考慮改用 MutationObserver 監控 DOM 變化，提高效能與即時性。

常見問題與坑點

  • 直接在 iframe URL 加 loop=1 不加 playlist，影片不會循環。
  • URL 中的 & 需先轉回 &，否則 URL 解析會錯誤。
  • 避免重複設定 src，否則會造成 iframe 不斷重新載入。

完整程式碼

(function () {
  function fixYouTubeLoop() {
    document.querySelectorAll('iframe.youtube-loop').forEach((iframe) => {
      const rawSrc = iframe.getAttribute('src');
      if (!rawSrc) return;

      // 你的 src 可能含有 &，先轉回正常的 &
      const src = rawSrc.replace(/&/g, '&');

      if (!src.includes('youtube.com/embed/')) return;

      const videoId = src.split('/embed/')[1]?.split('?')[0];
      if (!videoId) return;

      const url = new URL(src);
      url.searchParams.set('loop', '1');
      url.searchParams.set('playlist', videoId);

      const newSrc = url.toString();

      // 避免無限重設
      if (newSrc !== src) iframe.setAttribute('src', newSrc);
    });
  }

  document.addEventListener('DOMContentLoaded', fixYouTubeLoop);

  // 若是 builder / lazy load 後面才插入 iframe，再補一次
  setTimeout(fixYouTubeLoop, 800);
  setTimeout(fixYouTubeLoop, 2000);
})();
標籤
分享

相關文章