YouTube視頻嵌入網頁自動播放並靜音 完美適配(圖)

我和你一樣在谷歌上搜索了大量的網頁找了很多資料:「YouTube嵌入自動播放」⋯⋯,每次按照網站裡發佈的教程、代碼進行測試總是失敗,最糟糕的是有一次是實現了效果,結果還把網頁弄得中木馬了⋯⋯

現在,終於找到一款簡單粗暴的代碼,即可實現:自動播放、隱藏按鈕、隱藏影片標題、隱藏 YouTube Logo、自動循環播放(重播)、隱藏全螢幕按鈕等等,接下來請依照下面的步驟開始跟著我們做吧。見證奇蹟的時刻到了!


前情提要:無論在電腦端或行動裝置上滑動 Facebook 時間軸,遇到影片會自動播放,預設為靜音狀態,除非你點擊開啟影片否則不會出現聲音,這能讓你在瀏覽時不錯過影片,但又不會因為聲音而干擾到其他人,這項設計也被應用在 Instagram(不過如果你網路不是吃到飽,請記得關閉 Facebook 自動播放影片功能以免帳單爆掉)。若想把 YouTube 影片內嵌至網站,但又不希望在自動播放時出現聲音嚇到訪客的話,你知道要如何設定嗎?

國外部落格 Labnol 分享一段相當實用的程式碼,讓 YouTube 影片在嵌入網站有更多選擇。

一般使用者會直接利用 YouTube 產生的 iframe內嵌程式碼,不過 Labnol 是透過 YouTube Player API,因此能夠做到包括自動播放、隱藏按鈕、隱藏影片標題、隱藏 YouTube Logo、自動循環播放(重播)、隱藏全螢幕按鈕等等,當然這些完全符合 YouTube 使用規定。

很多時候我們想在網站內嵌入影片,或者把它做為類似宣傳看板播放,自動播放、靜音及重複循環就是非常必備的!以下我會分享這段程式碼,只要照著教學修改使它符合你的需求即可。


使用教學
開始前,你可以查看範例頁面,查看視訊自動播放且靜音的 YouTube 影片,該影片會在頁面載入後自動播放,但音量部分預設為最左邊也就是靜音狀態。

1、開啟你要嵌入網站或部落格的 YouTube 影片,網址 https://www.youtube.com/watch?v= 後方字串就是該影片的 ID,接下來我們要用到它(如圖所示部分)。

YouTube,靜音,自動播放

2、接著複製以下程式碼,將「YOUR_VIDEO_ID」部分以你剛才複製的影片 ID 取代。

3、如果你需要修改各項設定值,該程式碼已經用中文註釋這樣更容易操作管理。

Ps:若你要用於部落格平台或架站服務的話,記得一定要支援 JavaScript 程式碼否則無法使用。

<div id=”muteYouTubeVideoPlayer”></div>

<script async src=”https://www.youtube.com/iframe_api”></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player(‘muteYouTubeVideoPlayer’, {
videoId: ‘YOUR_VIDEO_ID’, // YouTube 影片ID
width: 560, // 播放器寬度 (px)
height: 316, // 播放器高度 (px)
playerVars: {
autoplay: 1, // 在讀取時自動播放影片
controls: 1, // 在播放器顯示暫停/播放按鈕
showinfo: 0, // 隱藏影片標題
modestbranding: 1, // 隱藏YouTube Logo
loop: 1, // 讓影片循環播放
fs: 0, // 隱藏全螢幕按鈕
cc_load_policty: 0, // 隱藏字幕
iv_load_policy: 3, // 隱藏影片註解
autohide: 0 // 當播放影片時隱藏影片控制列
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}

// Written by @labnol
</script>

如此一來,你就能將 YouTube 影片嵌入網站中,又能讓它自動播放、靜音,有很多產品網站會將廣告或產品介紹直接放置於網站首頁,在開啟後自動播放或於背景播放,也是利用類似方式做到的。不過這裡列出的設定值不多,想更深入應用的話可以去查查看 YouTube Player API

13 Comments

  1. 找了好久我要的代碼在這裡!完美解決了YouTube投放公司宣傳片靜音的問題!幫忙轉發收藏了👍

  2. 很实用!找了很多资料。看到大家的留言反馈,我也凭着良心来留言了。好东西就是要分享!谢谢站长的辛苦!

  3. 在谷歌裡搜到網頁:YouTube自動播放代碼⋯都是失效的 根本就播放不了!😡好不容易找到這裡來了。終於實現了自己想要的功能!希望這個網頁排到谷歌首頁去讓更多需要的網友能受益!謝謝🙏!

  4. 你好 我想請問一下 若是嵌入播放清單 要如何不顯示下方的”更多影片”的部分 只要影片播放點選暫停就會出現這部分 還有發現自動撥放這部分是不是google瀏覽器都不支援了? 因為我用google瀏覽器看並不會自動撥放 但是火狐和ie可以

    1. @小幅 目前代碼裡只支持單個影片不自動推薦其他視頻,正如你提出所需的功能,目前代碼裡沒有提供,在文章裡有提到此處【YouTube Player API】這個連結裡可以參看谷歌官方給的功能開發你需要的功能。

      目前代碼還是支援谷歌瀏覽器的,目前其他用戶沒有反應這個問題,我這邊重新測試後發現沒有問題呢。我使用Mac版最新版谷歌瀏覽器(版本 67.0.3396.99 (正式版本) ,所以,你用的是win系統嘛?目前win系統我沒有測試過。

  5. 我搜索:YouTube嵌入网页自动播放 找了好多方法都失效了,感谢小编,这个方法实现了。特此留言 以资鼓励。——福音视频网

  6. 遊get到一個新技能了,我們公司的宣傳廣告也是用這個方法實現了首頁播放,謝謝優優網!一百個贊👍!

    1. @雲喬兒 感謝您的反饋,您的心意我們收到了,優優網將繼續為大家提供更優質的分享服務!感謝您!

  7. 谢谢优优网 果然成功实现了自动播放和静音的效果。太赞了。希望还能支持vimeo呢。期待中。。。

    1. 愛麗絲 你好!Vimeo 的視頻在分享的時候有一個更多的選項,裡面就可以勾選相應的設置,包括:去掉標題、去掉圖標、去掉聲明、自動播放等功能。如果以還有疑問請隨時留言互動解決哈。謝謝您的來訪!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *