自動播放背景視頻是許多網站主頁的流行功能，從大型電子商務品牌到 B2B 軟體和服務公司。 您可以使用增加的視覺興趣來吸引新訪客的注意力並展示您的品牌個性。 使用 WordPress，設置視頻背景非常簡單。 但是，它也很容易在不經意間以妨礙網站性能和 SEO 工作的方式實施。
巴塔哥尼亞 經常在他們的網站上使用視頻背景
在這篇文章中，我們將介紹在放置自動播放背景視頻時要考慮的關鍵因素。 然後，我們將學習如何為用戶和搜索引擎優化該功能。
第 1 步：選擇正確的方法在您的主頁上獲取視頻
選項 A：來自視頻託管平台的嵌入代碼
您可以使用此選項獲得最大的靈活性，但它也需要少量的技術知識。 只需將原始 HTML 嵌入代碼輸入到「嵌入」Gutenberg 塊中，或者如果您直接編輯，則輸入頁面的源代碼。 使用 CSS 確保視頻符合您想要的設計。
如果您對一些輕量級的開發工作感到滿意並希望使用 Wistia 或 Vimeo 等託管平台，則此選項是理想的選擇。 通過這種方式，您可以直接在託管平台內優化視頻風格和外觀。 然後您可以通過嵌入代碼將其帶到您的網站上。
選項 B：通過古騰堡編輯器的「封面」塊
到目前為止，此選項是在 WordPress 中包含視頻背景的最簡單方法。 但是，此方法可能會產生性能問題，因為它要求您 在您的網站上自託管視頻. 您最終會在每次頁面載入時載入全尺寸視頻文件。 這可能會導致速度顯著減慢並影響用戶體驗。
要使用此方法，只需在古騰堡編輯器中選擇「封面」塊，然後上傳您要使用的視頻。
古騰堡的「封面」塊提供了一個簡單的解決方案
如果您願意，您可以在此處在視頻上添加文本疊加層。
選項 C：將 Elementor 與 YouTube 結合使用
如果您在 WordPress 網站上使用 Elementor 頁面構建器，這裡有一個內置功能，可讓您包含視頻背景。 這個短視頻 很好地演示了如何做到這一點。 這很簡單。 只需在 Elementor 中選擇一個全形模板，添加一個背景視頻元素，就可以了！
使用 Elementor，您也可以上傳自己的視頻並在網站上自行託管。 然後將使用 HTML5 視頻標籤播放視頻。 另一種選擇是包含一個 YouTube 鏈接。 如果您要走這條路，我強烈建議您使用 YouTube 選項。 這有助於避免從您自己的虛擬主機提供視頻時可能出現的性能問題。
從這裡，您可以通過指定循環的起點和終點來選擇要在後台循環播放的視頻部分。
選項 D：使用專用插件
有許多免費插件可用，例如 高級WordPress背景，其中包括自動播放背景視頻的功能。 Advanced WordPress Backgrounds 允許您從 Vimeo 或 YouTube URL 添加視頻，以及自託管。 出於與 Elementor 方法相同的原因，我會推薦前一個選項。
最終，每種方法都有利有弊。 如果您有技術技能，我建議您直接使用代碼並包含嵌入，然後調整 CSS 以適應。 但是，如果這超出了您的技能範圍，請選擇插件或 Elementor 選項。
閱讀更多： 哪個是 SEO 的最佳視頻託管平台？ »
第 2 步：在 WordPress 中非同步載入背景視頻
自動播放背景視頻可能導致的一個主要問題是載入緩慢。
如果用戶連接的帶寬有限，則可能會載入其餘的頁面元素，而視頻背景可能會在很久以後才會出現。 或者，更糟糕的是，如果實施不當，載入緩慢的視頻可能會阻止其他關鍵頁面元素的呈現。 在任何一種情況下，這不僅會影響用戶體驗，還會對搜索排名產生負面影響——尤其是考慮到谷歌的偏好 快速流暢的網站.
為避免這兩種情況，請確保將視頻設置為使用非同步 JavaScript 載入，以便其他頁面元素和視頻同時載入。 此外，請確保您使用支持自適應流媒體的平台託管您的視頻，例如 YouTube、Vimeo 或 Wistia。 自適應流媒體意味著視頻主機動態降低視頻比特率以應對用戶的帶寬。
雖然從技術角度來看這聽起來有點挑戰性，但實際上並非必須如此！ 因為 Yoast 視頻 SEO 插件 為您做這一切，確保一切都快速無縫地載入。 如果您還沒有為您的網站設置它，請立即採取下一步行動！
第 3 步：選擇循環並保持簡短
自動播放的背景視頻需要循環播放。 因此，選擇合適的順序對於提供吸引人的體驗至關重要。 執行此操作的方式很大程度上取決於您的視頻是如何拍攝的。 如果視頻有很多剪輯和場景變化，每個場景旋轉幾秒鐘就可以很好地工作。 它幾乎提供了預期視頻的「預覽」。
但是，對於具有更多單鏡頭或動畫感覺的視頻來說，情況有所不同。 相反，您需要找到一個序列，其中循環的開始和結束看起來非常相似。 這是為了幫助他們很好地融入彼此。
重要的是要考慮在進行編輯時希望循環如何工作。 理想情況下，您應該專門為此目的編輯視頻。 但是，如果您無法使用一些無法重新編輯的預先存在的內容，請嘗試在現有資產中找到一個可以很好地相互融合的起點和終點。 然後使用您的託管平台或 WordPress 中的工具（例如使用 Gutenberg 方法）來規定起點和終點。
自動播放的背景視頻一般應該在 10-30 秒左右。 您需要足夠的運動和變化來在整個循環中提供一些敘述和視覺進展。 但是您不希望視頻太長太複雜以至於分散了頁面其餘部分的注意力。
第 4 步：確定您的視頻背景是否應該是點擊播放並刪除額外的播放器元素
基本上有兩種類型的自動播放背景視頻。 它們要麼充當完整視頻的預告片，要麼純粹作為獨立的視覺資產存在。 在第一種情況下，您希望您的視頻具有附加功能。 您需要一個播放按鈕，通常通過覆蓋/燈箱將用戶帶入全屏視頻體驗。 在第二種情況下，您想刪除所有播放器元素，因此視頻僅顯示為動態圖像，而不是帶有可見控制項的圖像。
當您希望您的視頻充當移動縮略圖以獲得更大的體驗時，這需要一些額外的工作。 Wistia 嵌入本機提供此功能，一個很好的例子是 SparkToro 主頁.
當您按下播放按鈕時，SparkToro 主頁視頻會展開為全屏
如果您使用的是不同的平台，那麼您實際上需要在自動播放視頻上添加一個播放按鈕疊加層，當點擊時它會在頂部載入輔助視頻。
您可以使用大多數付費託管平台（例如 Vimeo 和 Wistia）刪除播放器控制項。 但是，如果您使用的是標準 YouTube 嵌入並想要刪除播放器控制項，則需要通過輔助播放器進行處理。 這是由於 YouTube 播放器不允許您刪除元素。 步驟 1 中詳述的選項 C 和 D 提供了解決方案。
第 5 步：確保視頻背景在移動設備上正確縮放
在 WordPress 中自動播放背景視頻的另一個常見錯誤是 確保良好的移動功能. 在移動設備上通過標準垂直取景觀看 16×9 寬屏視頻時非常小。 因此，頁面的整體呈現方式需要完全不同。
視頻可以響應地調整到很小，其餘的頁面元素重新排序並隨之移動。 或者視頻可以隱藏在較小的屏幕尺寸。 通常，我更喜歡將視頻與頁面的其餘部分一起縮小，並使用 CSS 來確保核心文本和菜單可見，即使在更小的尺寸下也能看到視頻。
要避免的核心錯誤是僅嵌入一個巨大的視頻，該視頻會被截斷，或者在移動視圖中佔據首屏上方的整個頁面。 再一次， Yoast 視頻 SEO 插件 是你的朋友在這裡！ 它會自動確保視頻對所有主要視頻託管平台都有響應。
最後一個優化步驟是確保包含所有必要的 Schema.org 元數據 用於 Google 搜索——特別是視頻標題、縮略圖和持續時間。 請注意，作為自動播放視頻，縮略圖本身永遠不會向用戶顯示。 然而，需要通過微數據或 JSON-LD 在 Schema.org 數據中引用圖像文件。 這確保了視頻可以呈現為 Google 搜索中的視頻豐富片段.
聽起來很複雜？ 別擔心， Yoast 視頻搜索引擎優化 插件為您自動完成！ 有關 SEO 所需數據的更詳細細分，請查看 這篇關於如何優化視頻頁面的帖子.
在搜索結果中獲取您的視頻！
獲取此插件，讓您的視頻符合 Google 視頻輪播和 Google 視頻搜索結果的條件！
獲取視頻 SEO »1 個站點每年僅需 79 美元（不含增值稅）
菲爾諾丁漢
Phil Nottingham 是一位營銷策略師，專門研究視頻 SEO 和品牌策略以及搜索引擎優化。
接下來的是！