在網頁中嵌入 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);
})();

在 WooCommerce 會員後台嵌入 Amelia 預約日曆，可以讓用戶直接查看與管理預約，提升使用體驗。但直接嵌入 WordPress 後台頁面時，會看到不必要的管理員選單與工具列，影響介面整潔度。本文將介紹如何利用 WordPress 的 admin_head 鉤子與 WooCommerce 的會員選單過濾器，達成隱藏管理員元素並新增「我的日曆」選單的功能。

隱藏 WordPress 管理員選單與工具列

當 iframe 載入 WordPress 後台 Amelia 預約頁面時，左側選單、頂部工具列等管理員元素會干擾介面。透過 admin_head 鉤子判斷 URL 是否帶有 iframe=true 參數，動態插入 CSS 隱藏這些元素，並調整內容區域寬度與頁面邊距。

關鍵程式碼片段：

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
<style>
   #adminmenumain, #wpadminbar, .update-nag, #screen-meta, #screen-options-link-wrap, #contextual-help-link-wrap {
    display: none !important;
   }
   #wpcontent, #wpfooter { margin-left: 0; }
   html.wp-toolbar { padding-top: 0 !important; }
   body { margin: 0; padding: 0; }
   #wpfooter { display: none !important; }
  </style>';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

這段程式碼確保只有在 iframe 模式下才隱藏管理員介面元素，避免影響正常管理操作。

在 WooCommerce 會員後台新增「我的日曆」選單

為方便用戶直接在會員中心查看 Amelia 預約日曆，使用 add_rewrite_endpoint 註冊新端點 ameliacustomercalendar，並透過 woocommerce_account_menu_items 過濾器在「我的課程」後新增「我的日曆」選單。

點擊「我的日曆」時，利用 woocommerce_account_ameliacustomercalendar_endpoint 鉤子輸出 iframe，載入 Amelia 預約日曆頁面，並帶入 iframe=true 參數以隱藏管理員元素。

關鍵程式碼片段：

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '<iframe width="100%" height="600" src="/wp-admin/admin.php?page=wpamelia-calendar&iframe=true"></iframe>';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');

測試與驗證

1. 在瀏覽器網址列加入 ?iframe=true，確認 WordPress 管理員選單與工具列是否隱藏。
2. 進入 WooCommerce 會員後台，確認「我的日曆」選單是否出現。
3. 點擊「我的日曆」，檢查 iframe 是否正確載入 Amelia 預約日曆，且無多餘管理員元素。

延伸與常見坑

• 若使用快取插件，新增端點後可能需要刷新重寫規則（Permalinks）。
• iframe 高度可依需求調整，避免出現滾動條。
• 確保 Amelia 預約系統權限設定允許會員查看。

完整程式碼

function hide_admin_elements_for_iframe() {
 if (isset($_GET['iframe']) && $_GET['iframe'] == 'true') {
  echo '
<style>
   #adminmenumain, /* 左側選單 */
   #wpadminbar, /* 頂部管理工具列 */
   .update-nag, /* 更新通知 */
   #screen-meta, /* 屏幕選項 */
   #screen-options-link-wrap, /* 屏幕選項按鈕 */
   #contextual-help-link-wrap /* 說明按鈕 */
   {
    display: none !important;
   }
   #wpcontent, #wpfooter{
    margin-left: 0;
   }
   html.wp-toolbar {
    padding-top: 0 !important;
   }
   body {
    margin: 0;
    padding: 0;
   }
   #wpfooter{
    display: none !important;
   }
  </style>';
 }
}
add_action('admin_head', 'hide_admin_elements_for_iframe');

function add_ameliacustomercalendar_to_myaccount_menu() {
 add_rewrite_endpoint('ameliacustomercalendar', EP_ROOT | EP_PAGES);

 add_filter('woocommerce_account_menu_items', function($menu_links) {
  $new_menu_links = [];
  foreach ($menu_links as $key => $label) {
   $new_menu_links[$key] = $label;
   if ($key === 'ameliacustomerpanel') {
    $new_menu_links['ameliacustomercalendar'] = '我的日曆';
   }
  }
  return $new_menu_links;
 });

 add_action('woocommerce_account_ameliacustomercalendar_endpoint', function() {
  echo '<iframe width="100%" height="600" src="/wp-admin/admin.php?page=wpamelia-calendar&iframe=true"></iframe>';
 });
}
add_action('init', 'add_ameliacustomercalendar_to_myaccount_menu');