小黃老師嘿技術

如何在 HTML 中嵌入 YouTube 播放清單

在網站或部落格中嵌入 YouTube 播放清單可以讓訪客輕鬆觀看一系列相關影片，而不需要手動切換影片。這篇教學將帶你一步步完成。

為什麼要嵌入 YouTube 播放清單？

• 自動播放系列影片：使用者可以一次觀看完整清單。
• 提升觀看體驗：播放清單中的影片會自動連接播放。
• 簡化管理：只需更新 YouTube 播放清單內容，網站上的影片也會同步變更。

如何取得 YouTube 播放清單 ID？

1. 前往 YouTube，打開你要嵌入的播放清單。
2. 在網址列中找到 list=XXXXX，這部分的 XXXXX 就是播放清單 ID。

範例網址：https://www.youtube.com/playlist?list=PL1234567890ABCDEF

播放清單 ID 為 PL1234567890ABCDEF

使用 HTML 嵌入 YouTube 播放清單

要將播放清單嵌入網站，請使用以下 HTML <iframe> 代碼：

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/videoseries?list=PL1234567890ABCDEF" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>

代碼說明：

• src：設定 YouTube 播放清單的網址，格式為：
  https://www.youtube.com/embed/videoseries?list=播放清單ID
• width 和 height：控制播放器的寬高。
• frameborder="0"：去除邊框。
• allowfullscreen：允許全螢幕播放。

進階功能

你還可以在 URL 末尾加入其他參數，來調整播放清單行為：

• 自動播放（可能受瀏覽器限制）：&autoplay=1
• 隱藏影片建議：&rel=0
• 靜音播放：&mute=1

範例：

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/videoseries?list=PL1234567890ABCDEF&autoplay=1&mute=1" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>

結論

透過簡單的 <iframe> 代碼，你就可以輕鬆在 HTML 頁面嵌入 YouTube 播放清單，讓使用者無縫觀看一系列影片。不論是教學影片、音樂播放還是產品介紹，這都是提升觀看體驗的好方法！