如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放？ - telegram 下載

（Copyright: peshkova / 123RF Stock Photo）

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

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

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

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

使用教學

開始前，你可以先至 Labnol 提供的範例頁面，查看自動播放且靜音的 YouTube 影片，該影片會在頁面載入後自動播放，但音量部分預設為最左邊也就是靜音狀態。

開啟你要嵌入網站或部落格的 YouTube 影片，網址 https://www.youtube.com/watch?v= 後方字串就是該影片的 ID，稍後我們會需要用到它（例如下圖選取的部分）。

接著複製以下程式碼，將「YOUR_VIDEO_ID」部分以你剛才複製的影片 ID 取代。如果你需要修改各項設定值，我也已經將程式碼註解翻譯成中文，應該會更容易理解。若你要用於部落格平台或架站服務的話，記得一定要支援 JavaScript 程式碼否則無法使用。

.gist table { margin-bottom: 0; }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	<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>