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，接下來我們要用到它（如圖所示部分）。

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。

uooiu

「UOOIU」優優網-優質生活，優先分享！
優優網內容涵蓋面有：養生健康、美食天地、居家生活、娛樂前沿、旅遊指南、美容時尚、電腦网络、星座運勢、社會百態等。

www.uooiu.com