WordPress 貼網址就能嵌入影片：oEmbed 支援哪些網站、不支援的怎麼辦

在 WordPress 寫文章，把 YouTube 影片的網址貼上去，就自動變成可以播放的影片，不用去 YouTube 複製一大段嵌入程式碼。這個功能叫做 oEmbed：WordPress 拿網址去問影片網站「這個網址要怎麼嵌入」，影片網站回傳播放器的程式碼。

不過有些網址貼了沒反應，最常見的就是 Facebook 影片。這篇整理 WordPress 支援哪些網站，以及不支援的怎麼處理。

怎麼用

區塊編輯器裡有兩種方式：

• 新增「嵌入內容」區塊，把網址貼進去。
• 在一個空白的段落直接貼上網址，編輯器會自動換成嵌入區塊。

傳統編輯器的話，把網址單獨放一行（前後不要有文字），前台就會顯示成影片。

WordPress 內建支援哪些網站

我們從 WordPress 7.1.3 讀出內建的清單，一共 55 個網址規則，常用的有：

• 影片：YouTube、Vimeo、TikTok、Dailymotion、TED、VideoPress
• 音樂、Podcast：Spotify、SoundCloud、Mixcloud
• 社群：Twitter（舊網址）、Reddit、Tumblr、Pinterest、Bluesky
• 其他：Flickr、Canva、Scribd、SpeakerDeck、Kickstarter、Amazon

不在清單上的

• Facebook、Instagram：2020 年起，這兩個平台的嵌入需要開發者金鑰，WordPress 就從內建清單拿掉了。貼上網址，前台只會顯示一串文字網址。測試時在手機寬度，那串很長的網址還把頁面撐出了橫向捲軸。
• x.com 網址：清單裡只有 twitter.com 開頭的規則，x.com 開頭的網址不在清單上。
• 台灣、中國的影音平台：大多不在清單上。

讓 Facebook 影片網址也能自動嵌入

Facebook 有提供「嵌入式影片播放器」的網址，不需要金鑰，只是 WordPress 不會自動用它。下面這段程式碼告訴 WordPress：看到 Facebook 影片網址，就換成這個播放器。

放在子佈景主題的 functions.php，或用 Code Snippets 這類外掛新增：

// 貼上 Facebook 影片網址，自動變成內嵌播放器（WordPress 預設不支援 Facebook）
add_action( 'init', function () {
	wp_embed_register_handler(
		'zw_facebook_video',
		'#https?://(?:www\.)?facebook\.com/(?:[^/]+/videos/\d+|watch/?\?v=\d+|reel/\d+)/?#i',
		function ( $matches, $attr, $url ) {
			$src = 'https://www.facebook.com/plugins/video.php?show_text=false&href=' . rawurlencode( $url );
			return '<div class="zw-fb-video"><iframe src="' . esc_url( $src ) . '" title="Facebook 影片" loading="lazy" allowfullscreen'
				. ' allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe></div>';
		}
	);
} );

• wp_embed_register_handler() 註冊一個自訂的嵌入規則：網址符合第二個參數的規則，就用第三個參數的函式產生 HTML。
• 規則涵蓋三種常見的 Facebook 影片網址：粉絲專頁的 /videos/編號、/watch/?v=編號、/reel/編號。
• 影片網址用 rawurlencode() 編碼後放進播放器網址，整個網址再用 esc_url() 處理。
• loading="lazy"：捲到影片附近才載入，Facebook 播放器很重，不要一打開網頁就載入。

再加一段 CSS 讓播放器在手機上自動縮小，貼到「附加的 CSS」：

.zw-fb-video iframe {
	display: block;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

aspect-ratio: 16 / 9 讓高度跟著寬度等比例變化，最寬 560px。直式的 Reels 影片，可以把比例改成 9 / 16、最寬改成 315px。

實際測試的結果

同一篇文章放了：YouTube 的嵌入區塊、Facebook 影片的嵌入區塊、單獨一行的 Facebook 影片網址、一段寫著 Instagram 網址的文字。

沒加程式碼

• YouTube 正常顯示成影片，WordPress 會自動加上保持 16:9 比例的外框。
• 兩個 Facebook 網址都只顯示成文字。

加了程式碼

• 兩個 Facebook 網址（嵌入區塊和單獨一行）都變成 Facebook 播放器。
• 電腦上 560×315，手機（390 寬）自動縮成 330×186，沒有橫向捲軸。
• 播放器有 loading="lazy"。

區塊編輯器裡：Facebook 影片的嵌入區塊預覽是空白的，因為編輯器的預覽走的是 WordPress 內建清單，加了程式碼也一樣。這是正常的，直接發佈，前台就會出現影片。不要因為預覽空白而把它轉換成一般連結，轉成連結就不會變成影片了。

手機上影片超出畫面？

YouTube 這類內建的影片，區塊佈景主題和 Twenty Twenty-One 都已經支援「響應式嵌入」，影片會自動等比例縮放。比較舊的傳統佈景主題如果影片在手機上超出畫面，可以在子佈景主題的 functions.php 加：

add_theme_support( 'responsive-embeds' );

延伸閱讀

• iframe 嵌入網頁語法：基本寫法、RWD 自適應寬度與網頁無法嵌入的原因
• YouTube 影片縮圖網址怎麼取得？各種尺寸的縮圖網址一次整理
• iframe 自動適應高度怎麼做？同網域與跨網域的寫法

影片放對地方，客人停留在網站的時間就會變長。正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供形象影片拍攝剪輯，影片和網站可以一起規劃，台北與全台客戶也歡迎來聊聊。