如何嵌入YouTube 影片到網站或部落格(含自動播放和重播)
文章推薦指數: 80 %
貼到網站或部落格可以輸入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影片參數。
這邊以本站使用的WordPress5.5為例,示範如何成功嵌入”影片從第1分鐘播到第2分鐘,然後重播該影片”的Youtube影片。
首先在區塊工具裡面選擇傳統編輯器。
然後在傳統編輯器區塊的選單內選擇「編輯HTML程式碼」。
然後在輸入框內輸入完整的嵌入影片的HTML代碼,如下:
貼上之後再從選單選擇「視覺化編輯」,就能看到預覽了(預覽時可能顯示較小,以實際發布無主)。
以下是嵌入的示範影片: 如想知到所有支援的參數,可參考以下Youtube官方文件。
參考連結 YouTubeEmbeddedPlayersandPlayerParameters相關文章 如何設定Wordpress網站的圖示Favicon Tags:WordPressYoutube
接下來要介紹一些進階的設定,所有設定只需要變更上方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影片參數。
這邊以本站使用的WordPress5.5為例,示範如何成功嵌入”影片從第1分鐘播到第2分鐘,然後重播該影片”的Youtube影片。
首先在區塊工具裡面選擇傳統編輯器。
然後在傳統編輯器區塊的選單內選擇「編輯HTML程式碼」。
然後在輸入框內輸入完整的嵌入影片的HTML代碼,如下:
以下是嵌入的示範影片: 如想知到所有支援的參數,可參考以下Youtube官方文件。
參考連結 YouTubeEmbeddedPlayersandPlayerParameters相關文章 如何設定Wordpress網站的圖示Favicon Tags:WordPressYoutube
延伸文章資訊
- 1讓Yotube在嵌入網站時,有更多參數可設定(靜音、自動播放
梅問題-YouTube IFrame Player API 官方提供API,讓Yotube嵌入網站時. 當今天有影片需求時,大家第一印象,就是將影片放置到YouTube中,除了無流量、 ...
- 2Youtube影片iframe嵌入網頁設定自動播放(autoplay) - JA ...
Youtube影片iframe嵌入網頁設定自動播放(autoplay),重複播放(loop),靜音(mute), ... <iframe width="640" height="360" src...
- 3Youtube Iframe API 常用功能- Google - Let's Write
Youtube iframe API 最基本的使用,就是嵌入影片了。 ... function 會自動帶一個參數,這邊用小寫 e ,實際上你想叫什麼都行,也可以寫成 event ,或 ...
- 4嵌入影片與播放清單- YouTube說明
在電腦上前往要嵌入的YouTube 影片或播放清單頁面。 · 按一下「分享」圖示 · 按一下「分享」選項清單中的[嵌入]。 · 複製方塊中的HTML 程式碼。 · 將程式碼貼到網站的HTML 中。
- 5YouTube Embedded Players and Player Parameters - Google ...
By appending parameters to the IFrame URL, you can customize the playback experience in your appl...