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

您想在 WordPress 中將 YouTube 視頻添加爲全屏背景嗎?如果使用得當,背景視頻可以立即吸引訪問者的注意力並將他們留在您的網站上。這使得視頻成爲登陸頁面和銷售頁面的絕佳選擇。在本文中,我們將向您展示如何在您的 WordPress 網站上添加 YouTube 視頻作爲全屏背景。

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

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

引人入勝且引人注目的視頻背景是將訪問者留在您網站上的好方法。當訪問者第一次登陸您的 WordPress 網站時,您只有幾秒鐘的時間來吸引他們的注意力並讓他們留下來。

如今,許多不同的 WordPress 主題都支持視頻背景。但是,在 WordPress 上上傳和託管視頻可能會佔用大量帶寬。

根據您的 WordPress 託管計劃,您甚至可能必須購買額外的存儲空間。

在 WPBeginner,我們強烈建議不要將您的視頻上傳到 WordPress

相反,您可以使用 YouTube 等服務,然後將視頻嵌入到 WordPress 網站的背景中。通過這種方式,您可以在不減慢網站速度的情況下從競爭對手中脫穎而出。

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

方法1:使用高級WordPress背景作爲全屏視頻背景(免費)

如果您正在尋找一種免費且簡單的方法來將 YouTube 視頻添加爲全屏背景,那麼您可以使用高級 WordPress 背景

這個免費的插件添加了一個背景塊,允許您使用任何顏色、圖像或視頻(包括 YouTube 視頻)創建全屏背景。

首先,您需要安裝並激活該插件。

激活後,只需前往要添加 YouTube 視頻作爲全屏背景的頁面或帖子即可。然後,您可以繼續並單擊“+”添加塊按鈕。

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

如何將全屏視頻添加到 WordPress 博客文章或頁面

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

由於您要添加YouTube視頻,請單擊“視頻”選項卡。之後,選擇“YouTube / Vimeo”選項卡。

您現在可以複製並粘貼要在 WordPress 博客上使用的 YouTube 視頻的 URL。

獲取 YouTube 視頻的網址

現在,WordPress 塊編輯器將顯示此背景外觀的預覽。

Advanced WordPress Backgrounds 會根據您添加的內容更改視頻的大小,因此如果視頻當前看起來有點小,請不要擔心。

如何在WordPress中自定義YouTube背景視頻

默認情況下,視頻背景在移動設備上處於禁用狀態。

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

在移動設備上顯示 YouTube 背景

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

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

您還可以通過禁用“循環”開關來阻止視頻循環播放。

如何將YouTube背景視頻添加到網站

默認情況下,只有當訪問者可以在瀏覽器中看到視頻時,纔會播放視頻。這將有助於保持您的網站性能,因此您通常希望禁用“始終播放”切換開關。

首次添加視頻時,它以 100% 的不透明度顯示,因此看起來很純。隨意拖動“圖像不透明度”滑塊,使YouTube視頻背景更加微妙。

更改 YouTube 視頻的不透明度設置

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

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

向視頻背景添加疊加層

隨意探索其他設置,如視差效果和間距,使背景看起來完全符合您的要求。

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

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

向 YouTube 背景視頻添加塊

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

當您對它的外觀感到滿意時,只需單擊“更新”或“發佈”按鈕即可使頁面生效。現在,如果您訪問您的 WordPress 網站,那麼您將看到視頻背景的實際效果。

WordPress 中的 YouTube 視頻背景示例

方法二:使用Thrive Architect添加全屏視頻背景(推薦)

如果您希望完全自定義全屏背景視頻,甚至輕鬆設計網站上的所有頁面,那麼此方法適合您。

將 YouTube 視頻添加爲全屏背景的最佳方式是使用 Thrive Architect

Thrive Architect 是一個易於使用的頁面構建器插件,專爲初學者而設計。除了視頻背景功能外,它還具有使用靈活的拖放功能,因此您可以輕鬆創建所需的網站。

此外,它還帶有針對轉化進行了優化的智能登錄頁面模板,因此您的登錄頁面從一開始就爲成功做好了準備。

Thrive Architect 是適合您的頁面構建器插件嗎?

如果您想使用此方法,請繼續購買 Thrive Architect 計劃。它可以作爲獨立產品購買,也可以作爲 Thrive Themes 捆綁包的一部分購買。

然後,只需安裝插件即可。

之後,您可以從 WordPress 管理區域轉到“頁面”並選擇要編輯的頁面。將鼠標懸停在頁面上,然後選擇“使用 Thrive Architect 編輯”。

單擊頁面上的“使用 Thrive Architect 編輯”

接下來,單擊頁面右側的“+”按鈕,找到“背景部分”元素。

只需單擊它即可將其添加到頁面中。

在 Thrive Architect 中添加背景部分

此時,您可以導航到頁面左側並向下滾動到“背景樣式”部分。

在這裏,只需激活“視頻背景”切換開關,然後選擇“YouTube”作爲源。

在 Thrive Architect 中選擇視頻背景樣式

之後,轉到要用作全屏背景的 YouTube 視頻。

只需像這樣複製YouTube視頻URL:

獲取 YouTube 視頻的網址

然後,將 URL 粘貼到相應的部分中。

您現在應該在屏幕上看到背景。

在 Thrive Architect 中粘貼視頻背景 URL

雖然添加了背景,但它還不是全屏的。

爲確保它是全屏的,您需要向上滾動到“主要選項”部分。然後,啓用“內容覆蓋整個屏幕寬度”、“與屏幕高度匹配”和“拉伸以適合屏幕寬度選項”。

在 Thrive Architect 中調整視頻背景高度和寬度

讓我們探索更多選項。要向背景添加一些內容,您需要做的就是再次單擊右側的“+”按鈕,然後拖放一個元素。

您可以添加文本、圖像、表單、按鈕、推薦等。Thrive Architect 有數十個以轉換爲中心的元素,您可以將其用於您的網站。

add-element-thrive-min

如果您認爲背景顏色與文本的對比度不夠好,只需返回“背景部分”設置即可。

然後,再次向下滾動到“背景樣式”,然後在“添加圖層”選項中,選擇純色。之後,您可以選擇一種顏色用作背景濾鏡,並根據需要調整不透明度。

完成後,只需單擊“應用”。

在 Thrive Architect 中更改顏色疊加不透明度

您可以在“背景部分”設置中調整的另一件事是“滾動行爲”。您可以選擇是將其設置爲靜態、粘性還是視差。

我們建議僅將其保持靜態,以便背景不會在用戶向下滾動時移動。否則,視頻將繼續播放,這可能會減慢您的網站速度。

在 Thrive Architect 中調整視頻背景的滾動行爲

接下來您可以做的是轉到“響應”部分。在這裏,您可以選擇是否將視頻背景顯示在您網站的移動和平板電腦版本上。

這取決於你,但請記住,視頻需要一段時間才能加載。當您的訪問者在小屏幕設備上等待他們運行時,這可能會很煩人。

在 Thrive Architect 中調整視頻背景的響應行爲

一旦您對全屏YouTube視頻背景感到滿意,只需單擊“保存工作”按鈕即可保存更改。

就是這樣!

save-work-thrive-architect-min

現在,轉到您的 WordPress 網站,看看它的實時外觀。

這是我們的測試網頁的樣子。

使用 Thrive Architect 製作的視頻背景示例

額外提示:在 WordPress 中添加 YouTube 視頻提要

您想向您的網站添加更多視頻嗎?雖然 WordPress 具有內置的視頻嵌入塊,但它們並不是顯示視頻的最具視覺吸引力的方式,尤其是當您有多個視頻時。

這就是 Smash Balloon YouTube Feed Pro 的用武之地。

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

使用 Smash Balloon 嵌入 YouTube 播放列表

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

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

使用 Smash Balloon 社交媒體插件創建 YouTube 提要

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

wordpress

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章