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

已發表: 2023-06-10

您是否正在尋找一種在 WordPress 中將 YouTube 視頻添加為全屏背景的方法?

如果使用得當,背景視頻可以立即吸引訪問者的注意力並將其留在您的網站上。 這使它們成為登陸頁面和銷售頁面的絕佳選擇。

在本文中,我們將向您展示如何在您的 WordPress 網站上添加 YouTube 視頻作為全屏背景。

How to add YouTube video as fullscreen background in WordPress

為什麼使用 YouTube 視頻作為全屏背景?

當訪問者首次登陸您的 WordPress 網站時,您只有幾秒鐘的時間來吸引他們的注意力並讓他們留下來。

引人入勝且引人注目的視頻背景是讓訪問者留在您網站上的好方法。 此外,還有許多支持視頻背景的不同 WordPress 主題。

但是,在 WordPress 上上傳和託管視頻會佔用大量帶寬。 根據您的 WordPress 託管計劃,您甚至可能需要購買額外的存儲空間。

一種解決方案是添加 YouTube 視頻作為全屏背景。 通過這種方式,您可以在不降低網站速度或占用額外存儲空間的情況下從競爭對手中脫穎而出。

也就是說,讓我們看看如何在您的 WordPress 網站上添加 YouTube 視頻作為全屏背景。

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

將 YouTube 視頻添加為全屏背景的最簡單方法是使用 Advanced WordPress Backgrounds。 此插件添加了一個新的背景塊,允許您使用任何顏色、圖像或視頻(包括 YouTube 視頻)創建全屏背景。

An example of a YouTube video background in WordPress

首先,您需要安裝並激活插件。 如果您需要幫助,請參閱我們關於如何安裝 WordPress 插件的指南。

激活後,只需轉到要將 YouTube 視頻添加為全屏背景的頁面或張貼。 然後您可以繼續並單擊“+”按鈕。

在出現的彈出窗口中,開始輸入“Background AWB”。 當出現正確的塊時,單擊它以將其添加到頁面。

How to add a fullscreen video to a WordPress blog post or page

在左側菜單中,您將看到三個選項卡,分別對應您可以創建的不同類型的全屏背景:顏色、圖像和視頻。

由於您要添加 YouTube 視頻,請單擊“視頻”選項卡。

此插件可讓您使用自託管視頻作為背景。 但是,視頻會佔用大量存儲空間和帶寬,因此您永遠不應該將視頻上傳到 WordPress。

話雖如此,選擇“YouTube/視頻”選項卡。

How to add a YouTube video as a fullscreen background in WordPress

現在,您將需要要在 WordPress 博客上使用的 YouTube 視頻的 URL。

在新選項卡中,只需轉到視頻並複制地址欄中的鏈接即可。

Getting the URL for a YouTube video

完成後,切換回您的 WordPress 儀表板並將 URL 粘貼到“視頻 URL”選項卡中。

現在,WordPress 塊編輯器將顯示此背景的外觀預覽。 Advanced WordPress Backgrounds 會根據您在其上添加的內容更改視頻的大小,因此如果視頻當前看起來有點小,請不要擔心。

How to customize a YouTube background video in WordPress

在開始添加內容之前,配置背景設置是個好主意。

默認情況下,視頻背景在移動設備上處於禁用狀態。 與台式電腦相比,智能手機和平板電腦通常具有更小的屏幕和更低的處理能力。 考慮到這一點,最好在移動設備上禁用視頻背景。

但是,如果您確實想在移動設備上顯示視頻背景,請單擊以激活“在移動設備上啟用”開關。

Showing a YouTube background on mobile devices

開箱即用,該塊將循環播放整個 YouTube 視頻。

另一種選擇是通過在“開始時間”和“結束時間”框中鍵入確切時間來播放視頻的特定部分。

How to add a YouTube background video to a website

您還可以通過禁用“循環”切換來停止循環播放視頻。

默認情況下,視頻只會在訪問者可以在瀏覽器中看到時播放。 這有助於提高您的 WordPress 速度和性能,因此您通常希望禁用“始終播放”切換。

當您第一次添加視頻時,它以 100% 的不透明度顯示,因此看起來很穩固。

根據您網站的設計,您可能希望通過拖動“圖像不透明度”滑塊來試驗半透明視頻背景。 這可能是一種創建更微妙的 YouTube 視頻背景的方法。

Changing the opacity settings for a YouTube video

如果您嘗試不透明度,那麼您可能還想嘗試添加彩色疊加層。

只需單擊以展開“覆蓋顏色”部分,然後使用設置來創建不同顏色的覆蓋。

Adding an overlay to a video background

Advanced WordPress Backgrounds 插件支持幾種不同的視差效果。 這是一種現代網頁設計技術,其中背景元素的滾動速度比前景內容慢,這通常會增加頁面設計的深度。

要嘗試不同的視差效果,請單擊以展開“視差”部分,然後從下拉菜單中選擇一個選項。

Adding parallax effects to a WordPress website

選擇視差樣式後,您將可以訪問一些可以更改速度的額外設置。 您還可以在移動設備上啟用和禁用視差效果。

同樣,您可以嘗試不同的鼠標視差效果,當訪問者移動鼠標時,這些效果會導致背景滾動得更慢。

要查看這些設置,請單擊以展開“鼠標視差”部分。

Adding mouse parallax effects to a background video

當您對 YouTube 視頻背景的設置感到滿意時,就可以開始添加文本、鏈接和圖像等內容了。

首先,單擊背景 (AWB) 塊中間的“+”圖標。

Adding blocks to a YouTube background video

這將打開一個彈出窗口,您可以在其中選擇要添加的塊。 Advanced WordPress Backgrounds 插件適用於所有標準 WordPress 塊,因此您可以添加任何您想要的內容。

配置第一個塊後,只需再次單擊“+”按鈕,然後添加您要使用的下一個塊。

Adding a RafflePress giveaway block to a video background

只需不斷重複此過程即可創建帖子或頁面佈局。

當您對它的外觀感到滿意時,單擊“更新”或“發布”按鈕使頁面生效。 現在,如果您訪問您的 WordPress 網站,您將看到正在運行的視頻背景。

An example of a YouTube video background in WordPress

獎勵:如何在 WordPress 中添加 YouTube 視頻源

視頻背景可以吸引訪問者的注意力,同時還可以宣傳您的 YouTube 頻道。 但是,如果您真的想在 YouTube 上吸引更多訪問者和訂閱者,那麼您可能需要向您的網站添加更多視頻。

這就是 Smash Balloon 的用武之地。

Smash Balloon YouTube Feed Pro 是市場上最好的 YouTube 圖庫插件。 它會自動顯示來自您的 YouTube 頻道的所有最新視頻,因此訪問者總是能看到最新的內容。

Embedding a YouTube playlist using Smash Balloon

只需使用 Smash Balloon 的簡易編輯器創建 YouTube 提要,然後使用短代碼或插件的現成塊將其添加到任何頁面或帖子。

您還可以使用 Smash Balloon 將 YouTube 播放列表、收藏夾和直播流嵌入您的 WordPress 網站。

Creating a YouTube feed using the Smash Balloon social media plugin

Smash Balloon 最好的一點是它不會減慢您的網站速度。 該插件的內置 YouTube 緩存功能將確保您的網站始終快速加載,這對 SEO 非常有用。

我們希望本文能幫助您了解如何在 WordPress 中添加 YouTube 視頻作為背景。 您可能還想查看我們的指南,了解如何使用 WordPress 創建登錄頁面,以及我們專家挑選的最佳 YouTube 視頻庫插件。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您還可以在 Twitter 和 Facebook 上找到我們。