你應該注意到:無論在電腦版或行動裝置上滑動 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 程式碼否則無法使用。
如此一來,你就能將 YouTube 影片嵌入網站中,又能讓它自動播放、靜音,有很多產品網站會將廣告或產品介紹直接放置於網站首頁,在開啟後自動播放或於背景播放,也是利用類似方式做到的。不過這裡列出的設定值不多,想更深入應用的話可以去查查看 YouTube Player API。