官網『Hero Video Background 動態主視覺影片背景』設計完整攻略：中小企業如何用一支 8 秒短片把品牌質感拉滿又不讓網站變成龜速
Hero Video 能把品牌質感一秒拉滿，但也最容易讓網站變超慢。從何時該用、影片規格、HTML 屬性、手機版降級到 SEO，一次講清楚。
你打開一間 3D 動畫工作室的網站，第一屏是一支循環播放的短影片——攝影棚燈光緩慢升起、機械手臂沿著跑車輪框轉一圈、字幕慢慢淡入「Made for Motion.」。你甚至還沒讀到一個字，就已經覺得：這間公司「不一樣」。
這就是 Hero Video Background（動態主視覺影片背景）的威力。它不是特效炫技，而是把一段本來要用十行文字解釋的「我們是誰、我們做什麼、做得多細」，壓縮成 6 秒的情緒。
但也正因為它太吸睛，中小企業做這一塊最容易出兩種災難：一種是「首頁塞了一支 30MB 的 MP4，客戶連載入都載不完就跳走」；另一種是「特效很酷，但看完不知道你在賣什麼」。這篇就把 Hero Video 從「什麼時候該用、什麼時候別碰、影片怎麼拍、程式怎麼寫、SEO 怎麼保、行動裝置怎麼降級」一次講清楚。
Photo by Markus Spiske on Unsplash
一、什麼時候值得放 Hero Video？什麼時候別碰？
先講結論：Hero Video 不是每個網站都適合。它的成本（拍攝、剪輯、載入速度、行動裝置支援）比一張靜態圖高十倍以上，一定要值回票價才做。
值得做的情境：
- 賣「視覺感受」的品牌：飯店、餐廳、婚攝、設計工作室、動畫公司、健身房、旅行社。文字說不清「氛圍」，影片一秒到位。
- 賣「動態產品」：無人機、機械手臂、跑車、家電、運動器材。影片能展示「怎麼動」，靜態圖只能展示「長什麼樣」。
- 賣「服務流程」：健檢、洗車、寵物美容。影片能讓客戶看到「進到店裡會經歷什麼」，降低陌生感。
- 做「募資、活動、電影感」形象頁：一次性的活動網站、產品發表會 landing page，影片就是主角。
不該做的情境：
- 資訊型網站：律師事務所、會計師、B2B 工廠。客戶要的是「你能幫我解決什麼問題」，不是「你的辦公室多漂亮」。
- 手機流量佔 8 成以上：影片背景在手機版通常會被 iOS 自動阻擋、或直接吃掉行動數據。
- 沒有預算拍好片：拿一支手機在辦公室隨便拍、加個 Ken Burns 縮放，效果比放一張高品質靜態圖還差。
- 電商商品頁：客戶進來是要找商品，不是被氛圍轟炸。
一個簡單的判斷題：「客戶如果只看你首頁前 6 秒、沒讀任何一個字，你希望他感覺到什麼？」 如果答案是「一種情緒、一種節奏、一種質感」，那 Hero Video 就有機會。如果答案是「知道我們是做什麼的、能解決什麼問題」，就乖乖用文字＋靜態圖。
二、影片本身要怎麼準備？—— 5 個技術規格別搞錯
Hero Video 之所以會慘，八成是因為影片檔案沒處理好。以下是給中小企業老闆的「拿去給剪接師的規格單」：
1. 長度：6 到 15 秒，可無縫循環
訪客不會在首頁看你 30 秒影片。理想是 6–10 秒短循環，最長不超過 15 秒。剪的時候最後一格要能無縫接回第一格，否則每次跳接都會有一次「頓一下」，很扣分。
2. 尺寸：桌機 1920×1080，手機另外準備 1080×1920（或直接不放）
桌機用橫向 16:9，手機直接鎖直式 9:16。千萬不要「一支橫向影片給所有裝置」，手機上會被裁掉一半或壓到超小。
3. 檔案大小：桌機 < 2MB，手機版 < 1MB
這是硬性上限。超過 2MB 就會在慢速網路直接載半天。壓縮工具用 HandBrake，Web Optimized 打勾，H.264 編碼、CRF 值調到 28–30（畫質稍降但檔案可以縮到 1/5）。
4. 格式：主檔 MP4 (H.264)，加送 WebM (VP9)
MP4 是萬用格式。WebM 檔案更小、Chrome/Firefox 支援，可以讓瀏覽器優先載小的版本。程式碼可以這樣寫：
<video autoplay muted loop playsinline poster="/hero-fallback.jpg">
<source src="/hero.webm" type="video/webm">
<source src="/hero.mp4" type="video/mp4">
</video>5. 一定要有 poster 圖（靜態預覽圖）
影片載入前那 1–3 秒，畫面不能是黑的。指定一張跟影片第一格幾乎一樣的靜態圖當 poster，訪客一進來就看到「像影片的畫面」，甚至察覺不到影片還沒開始播。這一步可以直接把「感覺卡卡的」變成「感覺很順」。
Photo by Sam McGhee on Unsplash
三、HTML 屬性千萬別漏這 4 個
Hero Video 的 <video> 標籤有 4 個屬性缺一不可，任何一個少了就會出事：
- autoplay：進頁面就開始播，不用使用者點按。
- muted：靜音（這個沒加，iOS 和 Chrome 一律不允許自動播放，你的影片會卡在第一格）。
- loop：循環播放。
- playsinline：iOS Safari 必備，沒加的話手機會強制全螢幕播放，直接把整個首頁佔滿，體驗爆炸。
額外建議加上 preload="metadata"：只先載入影片的資訊而不是整支檔，讓首頁其他區塊先渲染出來。這對 LCP（Largest Contentful Paint）很有幫助，也就是對 Google 給你的 Core Web Vitals 分數很有幫助。
四、影片上面要不要放文字？—— 一定要，而且要看得清楚
Hero Video 最常見的失敗是：影片很美，但客戶看完不知道你賣什麼、要點哪一顆按鈕。原因是把 CTA（Call to Action）直接壓在影片上，結果影片亮色多、文字看不清。
解法有三種，任選一種：
A. 半透明黑色遮罩（最簡單、效果最穩）
在影片和文字中間鋪一層 rgba(0,0,0,0.4) 的黑色半透明。文字瞬間可讀，影片還能透出來，是九成中小企業該用的方案。
B. 漸層遮罩（電影感、質感高）
從影片底部往上鋪一個「下深上透明」的漸層 linear-gradient(to top, rgba(0,0,0,0.7), transparent)，把文字放在底部。這個作法在飯店、旅遊、精品品牌很常見。
C. 影片本身刻意留一大塊「安全區」（需要拍攝時就規劃好）
剪片時就把構圖規劃成「左邊留空、右邊有畫面」，文字直接壓在左邊空的地方，不需要遮罩。這種最漂亮，但拍攝時就要溝通清楚，事後補救很難。
不管哪種方案，主標題文字建議至少 48px、粗體、白色；副標題 20–24px；CTA 按鈕要有明顯背景色（不能是透明框），最好用品牌主色。永遠記得：訪客不會停下來研究你的網頁，他們是滑過去的，文字必須「掃一眼就懂」。
五、行動裝置要另外處理，不要偷懶
行動裝置是 Hero Video 最容易翻車的地方。三個原則：
1. iOS 低電量模式會強制阻擋自動播放
就算你 autoplay muted playsinline 都加了，只要用戶手機是低電量模式，影片就是不會動。所以 poster 圖一定要準備，讓沒動的時候至少還有一張漂亮圖。
2. 行動網路用戶要偵測連線速度
用 navigator.connection.effectiveType 偵測，如果是 2g 或 slow-2g，直接不載入影片、只顯示 poster 圖。這一段 JS 大概 10 行，但可以救你的手機轉換率：
const conn = navigator.connection;
if (conn && (conn.saveData || /2g/.test(conn.effectiveType))) {
document.querySelector('video').remove();
}3. 手機版直接考慮改成靜態圖 + 微動效
很多時候手機版根本不需要影片，一張高品質圖 + 淡入動畫、Ken Burns 慢速縮放，效果一樣好，載入還快十倍。用 CSS media query 判斷寬度，< 768px 直接切成靜態圖版本，不要跟手機硬拚。
六、SEO 與載入速度：這三件事顧好就不會被 Google 扣分
很多老闆擔心「放影片會不會影響 SEO」，答案是：放對了不會，放錯了會被扣到底。三個關鍵：
1. 影片不要用 iframe 嵌 YouTube 當背景
看起來很方便，但 iframe 會拖累 LCP、載入 500KB 以上的 YouTube 播放器 JS，還會有個小小的 YouTube logo 蓋在角落。永遠用自己的 MP4 檔，除非你就是要那個 YouTube 品牌。
2. 影片檔上 CDN，不要放主機根目錄
MP4 檔就算壓到 1.5MB，如果放在自己主機的 /videos/ 底下，海外訪客載入還是很慢。丟到 Cloudflare、Bunny CDN 或至少開 Cloudflare Pro 的自動快取，全球載入時間可以砍到原本的 1/3。
3. 給影片加 VideoObject 結構化資料
Google 認得 schema.org/VideoObject 標記，加上去之後首頁在搜尋結果可能出現影片縮圖，點擊率會多 20–30%。不用怕麻煩，這段 JSON-LD 大概 15 行，找工程師加一次就好。
Photo by Lee Campbell on Unsplash
七、一個實用檢查清單：上線前跑一遍
Hero Video 做完別急著上線，拿這 8 項清單一項一項打勾：
- 桌機版影片檔 < 2MB？（用 PageSpeed Insights 檢查）
- 手機版有另外處理（靜態圖 or 直式影片）？
autoplay muted loop playsinline四個屬性都有？- 有 poster 圖，且 poster 圖跟影片第一格幾乎一致？
- 影片上的主標題文字對比度夠強、掃一眼能讀？
- 主要 CTA 按鈕有明顯背景色、不是透明框？
- 低速網路偵測有做（
navigator.connection）？ - PageSpeed LCP 分數 > 75（綠燈）？
八項全部打勾再上線。少一項都可能讓你的轉換率從「加分」變「拖後腿」。
結語：影片是情緒，文字才是成交
Hero Video 做得好，可以把一個網站的「品牌感」拉到跟大企業同一個等級——這對做設計、動畫、餐飲、旅宿、活動策劃、時尚品牌的中小企業特別有價值。但別忘了：影片負責的是「讓客戶留下來」，把客戶留下來之後，接手成交的還是文案、CTA、和你網站後面的服務內容。
如果你的網站正好是那種「靜態圖說不清氛圍」的類型，很值得投資一次 Hero Video 改版；但如果你的客戶只想快點知道你能做什麼、多少錢、怎麼聯絡，就把預算省下來、把首頁做得清楚一點比較實在。
需要規劃、拍攝、剪輯、程式串接一條龍的 Hero Video 改版，或想先看看你的網站適不適合放影片，歡迎跟我們聊聊。做網站這件事，我們一直相信「做對的事，比做很酷的事更重要」。