標籤

｜JS Package｜Easily Embed YouTube Video Background

Easily Embed YouTube Video Background

在網頁設計中，使用影片作為背景是一種有效提升視覺吸引力與動態效果的方式。透過這款開源的 jquery.mb.YTPlayer.js，可以輕鬆實現將 YouTube 影片為網頁背景。


在 </head> 前，放 jquery.min.js、jquery.mb.YTPlayer.min.js 這兩個連結。

html

在 </body> 前，貼上以下程式碼，#bg-movie 為影片選擇器。

script
$(function(){
    $("#bg-movie").YTPlayer();
});

之後，在 html 寫 YTPlayer 設定，以下是本次範例設定，基本上就能順利執行。注意：若需影片自動播放，請將 stopMovieOnBlur 設為 false，以防止切換視窗時影片暫停。

html

YTPlayer 提供多種設定選項，以下表格供參考：

屬性 說明 預設值 參數
videoURL YouTube 影片的 URL（可使用短鏈或影片 ID）。 必填 URL
containment 設定影片背景的選擇器；未指定時為 body，設為 self 時為當前元素。 body 選擇器 / 元素的 ID 或 class
ratio 設定影片比例。 – 4/3, 16/9, auto（自動獲取比例）
vol 設定影片的音量。 – 數值 (1-100)
mute 是否靜音播放影片。 false true / false
showControls 顯示或隱藏播放器的控制項。 true true / false
showYTLogo 是否顯示 YouTube 標誌及原影片連結。 true true / false
useOnMobile 是否允許在行動裝置上播放。 true true / false
mobileFallbackImage 當 useOnMobile 設為 false 時，在行動裝置上顯示的替代圖片路徑 – 圖片路徑
coverImage 當自動播放關閉時，顯示作為背景的圖片路徑；若未設置，顯示影片的第一幀畫面。 – 圖片路徑
quality 設定影片品質。 default default / small / medium / large / hd720 / hd1080 / highres
opacity 設定影片透明度。 1 數值 (0-1)
autoPlay 是否自動播放影片；若靜音為 false，需用戶互動後影片才會播放。 true true / false
loop 設定影片重播次數，true 表示無限重播。 true true / false / 數值
startAt 設定影片開始播放的秒數。 0 數值（秒）
stopAt 設定影片停止播放的秒數，若為 0 則忽略。 0 數值（秒）
remember_last_time 返回頁面時是否從上次播放位置繼續播放。 false true / false
mask 添加遮罩，可設定單一路徑或時間對應的遮罩地圖。 – 遮罩路徑或遮罩對應物件
realfullscreen 是否啟用 HTML5 全螢幕模式。 true true / false
stopMovieOnBlur 當視窗失去焦點時是否暫停影片播放。 true true / false
playOnlyIfVisible 當播放器不在螢幕範圍內時是否暫停播放。 false true / false
anchor 視窗調整大小時影片的對齊方式。 center, center 方位值
showAnnotations 是否顯示影片註解。 false true / false
cc_load_policy 是否顯示影片字幕。 false true / false

圖素來源：
freepik（https://www.freepik.com/）
Footage Backgrounds Free（https://www.youtube.com/@footagebackgroundsfree5664/）

標籤：