最後更新：2026/10/13
花了一筆預算拍好形象影片，放到網站上卻出了狀況：首頁打開要等很久、手機上影片不會動、有人一進網站就被突然出現的聲音嚇到。影片做得再好，放錯方式也會變成扣分。
臺北很多品牌、工作室都有這樣的影片：一支一兩分鐘的形象片，或幾支商品、課程介紹。這篇整理三種常見的放法，各自適合什麼情況，以及每一種要注意的細節。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress。我想照下面這篇文章，在網站放影片：YouTube 嵌入、首頁的背景短片，或是點按鈕才彈出的影片視窗。
請先問我：我想用哪一種、影片放在哪裡、我用的佈景主題。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
做法一：YouTube 嵌入，最省事也最穩
大部分的影片，最好的放法是先上傳到 YouTube，再嵌入網站。影片的轉檔、不同網速的畫質、手機和電腦的播放器，全部由 YouTube 處理，你的主機不用負擔流量。
在 WordPress 的編輯器裡，把 YouTube 影片的網址直接貼在空白的段落上，它會自動變成「嵌入內容」區塊，不用複製任何嵌入碼。區塊設定裡的「為螢幕較小的裝置調整大小」維持開啟，影片在手機上就會照比例縮放。想讓影片置中或調整寬度，可以參考〈網頁設計如何在 WordPress 中將影片居中對齊〉。
如果你在意訪客的隱私，可以用 YouTube 的「隱私強化模式」：分享影片時選「嵌入」，勾選啟用隱私強化模式，嵌入碼的網址會變成 youtube-nocookie.com，訪客按下播放之前，YouTube 不會在他的瀏覽器存放追蹤用的資料。這種嵌入碼要用「自訂 HTML」區塊貼上。
直播也是一樣的做法：在 YouTube 開直播，把直播的網址或嵌入碼放進網站，網站就能同步播放。
做法二：首頁背景短片
首頁上方一段無聲、循環播放的短片，背景上壓著標題，很能營造氣氛。最簡單的做法是用 WordPress 的「封面」區塊：選擇上傳影片當背景，WordPress 會自動幫影片加上自動播放、靜音、循環、手機內嵌播放這些設定。
如果你的網站是客製的，或想控制得更細，也可以自己寫。HTML 放在「自訂 HTML」區塊：
<section class="hero">
<video autoplay muted loop playsinline preload="metadata" poster="/wp-content/uploads/hero.jpg">
<source src="/wp-content/uploads/hero.mp4" type="video/mp4">
</video>
<h1>品牌短片</h1>
</section><video> 後面那一串設定，每個都有用處。autoplay 是自動播放，但瀏覽器只允許「靜音」的影片自動播放，所以一定要搭配 muted，有聲音的影片不會自己動。loop 是循環播放。playsinline 是給 iPhone 的，少了它，iPhone 可能會把影片放大成全螢幕播放。preload="metadata" 讓瀏覽器先只讀影片的基本資料，不要一進網頁就下載整支。poster 是影片載入前先顯示的圖片。沒有寫 controls，畫面上就不會出現播放鍵和進度條，適合當背景。
CSS 放在「外觀 > 自訂 > 附加的 CSS」（區塊佈景主題在「外觀 > 編輯器 > 樣式」裡的「附加的 CSS」）：
/* 首頁背景短片 */
.hero {
position: relative; isolation: isolate; height: 60vh; overflow: hidden;
display: grid; place-items: center;
background: url(/wp-content/uploads/hero.jpg) center / cover; /* 影片還沒載入、或不播放時，先看到這張圖 */
}
.hero video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
.hero video { display: none; } /* 設定「減少動態效果」的人，只看靜態圖 */
}object-fit: cover 讓影片像背景圖一樣填滿區塊，不管螢幕比例怎麼變都不會留黑邊。isolation: isolate 這一行很容易漏掉：我們第一次測試沒有加，結果影片被壓在背景圖的下面，畫面上只看得到靜態圖。加了這一行，影片才會疊在背景圖上面。
最後一段是體貼的設計。有些人會在手機或電腦的設定裡打開「減少動態效果」，因為畫面一直動會讓他頭暈。遇到這樣的訪客，影片不播，只顯示靜態的背景圖。
背景短片本身也要注意：長度 10 到 15 秒就夠，解析度不用超過 1080p，壓縮成 MP4，檔案越小越好。它是氣氛，不是內容，重要的資訊要寫在文字裡，因為有些人根本看不到影片在動。
做法三：點按鈕才彈出影片
完整的形象影片比較長，不適合自動播放。常見的做法是放一顆「看介紹影片」的按鈕，點了之後畫面變暗、影片在中間播放，看完關掉回到原本的頁面。以前要做這種效果，通常得裝一個燈箱套件；現在的瀏覽器都支援 <dialog> 這個元素，幾行就能完成。
下面這段放在「自訂 HTML」區塊，把影片 ID 換成你的 YouTube 影片網址最後那一段：
<button type="button" class="video-open" data-video="https://www.youtube-nocookie.com/embed/影片ID">看介紹影片</button>
<dialog class="video-dialog">
<button type="button" class="video-close" aria-label="關閉">✕</button>
<iframe title="介紹影片" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
</dialog>
<script>
var dialog = document.querySelector('.video-dialog');
var frame = dialog.querySelector('iframe');
document.querySelectorAll('.video-open').forEach(function (btn) {
btn.addEventListener('click', function () {
frame.src = btn.dataset.video + '?autoplay=1';
dialog.showModal();
});
});
function closeVideo() { dialog.close(); }
dialog.querySelector('.video-close').addEventListener('click', closeVideo);
dialog.addEventListener('click', function (e) { if (e.target === dialog) closeVideo(); });
dialog.addEventListener('close', function () { frame.src = ''; }); // 關掉就停止播放
</script>CSS 一樣放在附加的 CSS：
/* 點按鈕彈出影片 */
.video-dialog { width: min(90vw, 960px); padding: 0; border: 0; border-radius: 16px; background: #000; }
.video-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.video-dialog iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-close { position: absolute; top: 8px; right: 8px; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }按下按鈕時才把影片網址放進 iframe，所以頁面一開始不會載入 YouTube 的播放器，網站比較快。showModal() 打開視窗時，背後的頁面會自動變暗、不能點；按右上角的 ✕、點影片外面的暗處、或按鍵盤的 Esc，都能關掉。最後一行在關掉時把影片網址清空，影片就會停下來，不然關了視窗還會聽到聲音在背後播。
我們在 Chrome 裡測過：點按鈕後視窗打開、影片網址帶著自動播放；按 Esc、點暗處都會關閉，關閉後影片網址被清空。aspect-ratio: 16 / 9 讓影片在手機上也維持正確比例。
影片不要放在自己的主機上
除了背景短片這種十幾秒的小檔案，完整的影片盡量不要直接上傳到 WordPress 的媒體庫。一支幾百 MB 的影片，同時有幾個人看，主機的流量和速度就會被拖垮，手機網路的訪客也要等很久。播放器框架這類工具適合要自己架影音平台的網站，一般品牌官網放在 YouTube 再嵌入就夠了。
影片是讓客人「看見」你的最快方式，放對位置、選對方式，它就會幫你說話。
如果你想讓形象影片在網站上發揮最大的效果，從版面到播放方式一起設計，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，形象網站可以把影片、文字和聯絡按鈕安排在對的位置。MIMI 提供臺北網頁設計服務，臺北的品牌、工作室可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
