如何嵌入 YouTube 影片到網站或部落格(含自動播放和重播)

很多部落客或網站經營者,都會有嵌入 YouTube 影片的需求。而 YouTube 也提供很方便的方式,只要複製貼上 HTML 代碼就能完成嵌入 YouTube 影片,另外也提供很多進階的設定,只要在嵌入影片網址加上簡單的參數,就能達到自動播放和輪播等功能。

如何嵌入 YouTube 影片

到 Youtube 上搜尋想要嵌入的影片,然後點擊影片下方的分享按鈕 > 點選分享視窗內的嵌入 (Embed)。

複製嵌入視窗內的 HTML 代碼,代碼格式如下:

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

貼到網站或部落格可以輸入 HTML 代碼的位置,就能簡單完成嵌入影片。

接下來要介紹一些進階的設定,所有設定只需要變更上方 HTML 代碼內的影片網址就能達成,設定方式如下:

https://www.youtube.com/embed/q1KZvATQ7Sk?參數1=值&參數2=值&參數3=值

Youtube 嵌入影片網址可以一次加入多個參數,同時開啟多種功能,記得第一個參數前面需加 ? ,後面每一組參數都用 & 隔開。

設定靜音

影片網址加上參數 mute=1 即可開啟自動播放功能。

https://www.youtube.com/embed/q1KZvATQ7Sk?mute=1

設定自動播放

影片網址加上參數 autoplay=1 即可開啟自動播放功能。

https://www.youtube.com/embed/q1KZvATQ7Sk?autoplay=1

加上 autoplay=1 可能會發現為什麼沒有自動播放呢? 因為某些瀏覽器需要影片是靜音的,才允許自動播放,避免干擾到你網站的訪客,所以這時就要同時加上靜音 mute=1。

https://www.youtube.com/embed/q1KZvATQ7Sk?mute=1&autoplay=1

設定自動輪播

自動輪播可設定要重播同一個影片或是其他 Youtube 影片,甚至可以指定播放清單。

如要同一個影片重播,需在嵌入影片網址後方同時加入 loop 和 playlist 兩個參數,如 loop=1&playlist=影片ID。

https://www.youtube.com/embed/q1KZvATQ7Sk?loop=1&playlist=q1KZvATQ7Sk

如要接著播放其他影片或播放清單, 只要將最後的 playlist=q1KZvATQ7Sk 改成其他影片的 ID 或 播放清單 ID。影片的 ID 及播放清單 ID 可在正在播放 Youtube 的瀏覽器上面的網址列看到。

設定開始與結束時間

start=秒數 可設定開啟時間,end=秒數 可設定結束時間,兩者可單獨使用或一起使用,以下範例是從開始 1 分鐘播放到第 2 分鐘結束

https://www.youtube.com/embed/q1KZvATQ7Sk?start=60&end=120

關閉相關影片推薦

Youtube 影片預設會在影片結束時,顯示與該影片相關的其他影片,有時會不相在自己的影片結束後顯示別人的影片,就可使用 rel=0 關閉相關影片推薦。

https://www.youtube.com/embed/q1KZvATQ7Sk?rel=0

最後示範以上所有參數混合使用,該影片從第1分鐘到第2分鐘一直重播,完整嵌入網址如下:

https://www.youtube.com/embed/q1KZvATQ7Sk?feature=oembed&mute=1&autoplay=1&loop=1&playlist=q1KZvATQ7Sk&start=60&end=120

更新:2018/9/25 之後 rel 參數行為已修改,rel=1 時無法相關影片推薦,但只會顯示同一個頻道的影片。

如何在 WordPress 嵌入 Youtube 影片

某些部落格像 WordPress 在編輯文章時,可以直接貼上 Youtube 等影片網址,直接解析成影片區塊。但這時候會發現,所有網址後面的參數全都不見了,所以就無法成功設定 Youtube 影片參數。

這邊以本站使用的 WordPress 5.5 為例,示範如何成功嵌入”影片從第1分鐘播到第2分鐘,然後重播該影片”的 Youtube 影片。

首先在區塊工具裡面選擇傳統編輯器。

然後在傳統編輯器區塊的選單內選擇「編輯 HTML 程式碼」。

然後在輸入框內輸入完整的嵌入影片的 HTML 代碼,如下:

<iframe width="560" height="315" src="https://www.youtube.com/embed/q1KZvATQ7Sk?feature=oembed&mute=1&autoplay=1&loop=1&playlist=q1KZvATQ7Sk&start=60&end=120" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

貼上之後再從選單選擇「視覺化編輯」,就能看到預覽了 (預覽時可能顯示較小,以實際發布無主)。以下是嵌入的示範影片:

如想知到所有支援的參數,可參考以下 Youtube 官方文件。

參考連結

相關文章