如何在 WordPress 中將視頻添加為全屏背景

視頻很棒，它們提供了比圖片更吸引人的媒體並捕捉到更多的情感。

現在，越來越多的網站管理員/品牌正朝著將視頻作為完整背景嵌入他們的網站的方向發展。 但是，將視頻嵌入背景的複雜性需要一些技術專長。

為了讓讀者的一切變得簡單而美好，我們將列出一個免費插件，將視頻嵌入到背景中，並詳細介紹如何通過簡單的配置將視頻嵌入到背景中。

注意：需要一些編碼經驗才能完全理解內容。 如果看起來有些混亂，請隨時在評論中提問。

在 WordPress 中將視頻添加為全屏背景的插件

插件很棒，只需點擊幾下即可提供所需的功能。 在繼續介紹如何使用編碼將視頻嵌入背景的詳細教程之前，我將列出一些插件。

1. mb .YTPlayer 用於背景視頻

用於背景集成的流行視頻插件之一。 該插件在頁面元素內集成了一個自定義播放器。

使用該插件，用戶可以輕鬆地將視頻集成到頁面和發布中。 安裝很簡單，插件會生成一個簡碼以便於集成。

該插件不完全支持響應式佈局。

完整的詳細信息和下載 | 演示

2.具有動畫效果的滑塊英雄

該插件的目的是使您能夠在 WordPress 中嵌入帶有滑塊效果的視頻背景。 該插件提供 11 種背景動畫、添加背景音樂、YouTube 和 Vimeo 視頻集成等功能。

該插件與任何 WordPress 主題或編輯器（如 Gutenberg）兼容，因此它可以在所有 WordPress 網站上快速響應。

完整的詳細信息和下載 | 演示

現在，真正的部分來了。 下一部分需要 WordPress 平台的編碼和技術工作。

視頻嵌入需要很多步驟。 讓我們一步一步完成。 一旦你理解了這些步驟，你就可以理解一件簡單的事情會變得多麼複雜。

1. 使用 Div 為視頻騰出空間。

2. 以絕對或固定方式將 Div 定位到視口的左上角。 下一步是將其高度和寬度設置為 100%，然後將 z-index 設置為 1。Z-index 定義了內容的深度。

3. 使用 JavaScript 縮放 Div 視頻。

4. 每次用戶縮放視頻時，監視器屏幕都會調整大小並再次縮放視頻。

5. 確保代碼適用於不同的瀏覽器和移動操作系統。

看起來有很多編碼，但我們將使用一個簡單的自定義插件來自動將視頻嵌入到 WordPress 帖子或頁面的背景中。

BG視頻：下載

下載插件並繼續正常安裝（就像其他插件安裝一樣）。

這個簡單的插件與簡碼配合使用，插件中提供了一個名為“bgvideo”的簡碼。 短代碼充當將視頻嵌入任何頁面或帖子的網關。

在繼續之前，我們需要為短代碼提供一些參數以獲取其完整功能。

參數是高度、寬度、mp4、webm、ogg、自動播放、循環、靜音和固定。 高度和寬度分別是指視頻的高度和寬度。 mp4、webm、ogg 字段是指相應視頻格式的 URL。 您必須提供每種格式的 URL，以便視頻可以在多個設備上運行而不會出現任何問題。

將視頻添加到媒體庫

下一步包括將視頻添加到媒體庫。 確保將所有格式（webm、ogg、mp4）添加到媒體庫中。

在 bgvideo 的幫助下，視頻短代碼被轉換為 bgvideo。

視頻短代碼如下所示

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video寬度=”1280″ 高度=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href="http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg"><img%class="alignnone size-large wp-image-1392" src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

不要忘記刪除視頻短代碼和錨標記前面的百分比（％）符號。

在 bgvideo 的幫助下，上面的代碼將轉換為下面的代碼

[bgvideo寬度=“1280”高度=“720” 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  海報="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  固定=“否”]

該插件會自動將視頻短代碼更改為 bgvideo 短代碼。

使視頻對用戶透明

完成所有設置後，您需要在頁面 CSS 屬性中做點小魔術。 原因是頁面內容阻礙了視頻的顯示。

CSS 將刪除頁面的內容，讓訪問者的視頻閃耀。

插入下面的 CSS 代碼以使一切正常。

＃頁{

背景：無；

}

要完全設置視頻背景，還需要進行許多其他調整。

包起來

對於我們的讀者來說，最好的選擇是使用成熟的插件並忽略編碼部分——如果你不知道編碼，編碼部分只會讓事情變得更糟。 您可以將需求轉移給您的開發人員，但這並不是免費的。

另一個很好的替代解決方案是使用動畫 GIFS 作為背景。 使用動畫 GIFS 有兩個原因。 與視頻相比，第一個是低帶寬使用，第二個是易於安裝。 另一個很大的優勢是您可能不需要擔心便攜性和其他設備兼容性問題。

動畫可以很容易地使用 CSS 形成或通過正常的背景變化上傳。

視頻背景的複雜性有點高，WordPress 社區或核心團隊可以注意到它並在他們即將發布的版本中進行更改。

如果您有視頻並想轉換為 gif，那麼有在線資源可以為您完成。 但是轉換後的 GIF 沒有經過優化，並且帶有很大的分量。

當您需要對計劃嵌入的視頻進行調整時，您可以找到一些很棒的免費視頻編輯器。 您可能需要剪切、裁剪或縮放視頻，添加文本，或者可能調整顏色主題以使其與您網站的風格相匹配。

如果您使用的是 Mac，自然可以使用 iMovie，因為它已經預安裝在您的計算機上（如果沒有，您可以免費獲得它）。 如果您使用的是 Windows – VSDC 免費視頻編輯器是一個不錯的選擇。 它擁有您可能需要的一切，從基本的分割/裁剪工具集到色彩校正和視頻風格預設。 此外，它在格式方面非常強大，您無需犧牲輸出文件的質量。

你覺得，我錯過了什麼嗎？ 在下面發表評論，讓我們知道。

*最後更新時間 2019 年 2 月 25 日