如何在WordPress博客文章中輕鬆嵌入視頻


您是否要將視頻嵌入到WordPress博客文章中? 視頻使您的網站栩栩如生,是增加用戶參與度的好方法。

WordPress使得從YouTube,Vimeo,Facebook,Twitter等許多視頻託管網站嵌入視頻變得非常容易。

在此初學者指南中,我們將向您展示如何輕鬆地將視頻嵌入WordPress博客文章,頁面和側邊欄小部件中。

如何輕鬆地將視頻嵌入WordPress

影片教學

訂閱WPBeginner

如果您喜歡書面說明,請繼續閱讀。

如何在WordPress博客文章和頁面中嵌入視頻

WordPress具有一項稱為自動嵌入的強大功能,該功能使您的網站可以從流行的視頻託管服務(例如YouTube,Vimeo等)中自動獲取嵌入代碼。

您需要做的就是將視頻URL粘貼到WordPress編輯器中。

例如,您可以復制要嵌入的視頻的YouTube URL。

接下來,編輯要在其中添加視頻的WordPress帖子或頁面,然後將URL粘貼到內容區域中。

將視頻嵌入WordPress帖子編輯器

粘貼視頻URL後,WordPress將立即獲取嵌入代碼並在內容編輯器中顯示YouTube視頻。

現在,您可以保存您的帖子,然後單擊“預覽”按鈕以查看博客帖子中的嵌入式視頻。

嵌入WordPress博客文章中的視頻

那不是那麼容易嗎?

添加視頻後,可以從右側的塊工具欄和“設置”列更改其設置。

視頻塊工具欄和設置

您可以調整視頻寬度,使其變為全角,更改對齊方式等等。 您還可以添加標題並在移動設備上保留視頻的長寬比。

WordPress只能對列入白名單的視頻服務進行自動嵌入。 對於其他網站,您仍然必須獲取嵌入代碼,然後將其粘貼到您的博客文章中。

這是在WordPress中自動嵌入的白名單視頻服務列表:

  • 亞馬孫
  • 動畫
  • Cloudup
  • 大學幽默
  • 人群信號
  • Dailymotion
  • 臉書
  • Flickr
  • 葫蘆
  • 伊姆古爾
  • Instagram的
  • 發行
  • Kickstarter
  • Meetup.com
  • 混合雲
  • Reddit
  • 混響
  • 截屏
  • 刻痕
  • 幻燈片分享
  • m滿志的杯子
  • 賀卡
  • 聲雲
  • 揚聲器甲板
  • Spotify
  • 泰德
  • Tumblr
  • 推特
  • VideoPress
  • Vimeo
  • WordPress.tv
  • 的YouTube

如果要從此列表之外的網站添加視頻,則需要視頻的完整HTML嵌入代碼。

只需複制視頻網站提供的HTML代碼,然後將其粘貼到編輯器中的“自定義HTML”塊中即可。

在WordPress中添加自定義嵌入代碼

使用舊的經典編輯器將視頻嵌入WordPress

如果您仍在使用舊的WordPress經典編輯器,則可以以相同的方式嵌入視頻。

只需從YouTube等視頻託管服務複製URL,然後將其粘貼到編輯器中即可。 如果使用視覺編輯器,則將看到視頻的預覽。

在舊的WordPress編輯器中嵌入視頻

但是,您將無法使用在新的WordPress塊編輯器中可以使用的寬度調整和其他選項。

如何在WordPress側邊欄小部件中嵌入視頻

就像WordPress頁面或帖子一樣,您也可以將視頻嵌入WordPress邊欄小部件中。

只需轉到 外觀»小部件 頁,然後將“文本”小部件添加到側邊欄。 請參閱我們的文章,了解如何在WordPress中添加和使用小部件。

在窗口小部件設置內,您需要將視頻URL粘貼到內容區域中。 WordPress將自動獲取嵌入代碼並顯示視頻預覽。

將視頻嵌入WordPress側邊欄小部件

不要忘記單擊“保存”按鈕來存儲您的小部件設置。

現在,您可以訪問您的網站以查看嵌入在WordPress側邊欄小部件中的視頻。

WordPress視頻嵌入插件

默認情況下,您無需使用插件即可將視頻嵌入WordPress。 但是,您可能希望使用插件來改善網站上的視頻觀看體驗。

以下是您可能想嘗試的一些插件。

1.粉碎氣球YouTube Feed

YouTube主頁的Smash Balloon

YouTube的Smash Balloon Feeds是最好的WordPress視頻插件之一。 它可讓您以可自定義的庫格式自動嵌入所有YouTube頻道視頻。 它會自動導入新視頻,合併供稿,添加實時流媒體等。

Smash Balloon還提供了YouTube供稿插件的免費版本,但是在下面的演示中,我們將展示Pro版本。

首先,您需要安裝並激活Smash Balloon Feeds for YouTube插件。 從那裡出發,前往 YouTube供稿»許可證 頁並輸入您的許可證密鑰。 您可以在插件網站上的帳戶下找到此信息。

粉碎氣球許可證密鑰

激活許可證密鑰後,請不要忘記單擊“保存更改”按鈕。 接下來,轉到“配置”標籤,然後單擊藍色的大按鈕以連接您的YouTube帳戶。

連接您的YouTube Feed

完成後,您將被重定向回WordPress儀表板以設置YouTube feed。

YouTube帳戶已連接

點擊“保存更改”按鈕,就可以開始了。

要將YouTube feed嵌入帖子或頁面,只需在WordPress中對其進行編輯。 在頁面編輯屏幕上,單擊(+)按鈕添加一個新塊,然後選擇“ YouTube訂閱”塊。

YouTube供稿塊

將圖塊添加到帖子編輯器中後,它將自動從YouTube頻道中獲取並顯示視頻。

嵌入YouTube feed

當您檢查站點時,您會看到您的feed已嵌入到您剛剛創建的頁面中。

您頁面上的YouTube Feed

Smash Balloon YouTube Feeds具有多種佈局和样式選項。 您可以通過訪問 YouTube供稿»自定義 頁。

輪播選項

在這裡,您可以選擇網格,畫廊,列表或輪播佈局。 不要忘記單擊“保存更改”按鈕來存儲您的更改。

您網站上的輪播Feed

您會看到有一個視頻輪播,該視頻輪播的左側和右側分別帶有導航箭頭,以及訂閱源底部的“訂閱”按鈕。

如果要進一步自定義Feed,請在插件設置中單擊“顯示”標籤。 此頁面列出了您可以在網站上的任何地方使用的一系列短代碼。

簡碼選項

要將簡碼插入帖子或頁面中,可以使用簡碼塊。

簡碼塊

現在,您可以添加Feed簡碼 [youtube-feed] (或您想要的任何變體形式)進入塊設置。

插入簡碼

您還可以將Smash Balloon YouTube feed與其新的Social Wall插件一起使用,該插件將您來自Facebook,Instagram,Twitter和YouTube的所有社交媒體內容合併在一個頁面上。

2. YouTube訂閱欄

YouTube訂閱欄的作用

YouTube訂閱欄會在您嵌入WordPress的YouTube視頻下方顯示一個YouTube訂閱按鈕。 它還會獲取您的YouTube訂閱者人數,以添加社交證明並鼓勵更多用戶訂閱。

我們首先創建它是為了在此網站上宣傳WPBeginner的YouTube頻道。 許多用戶要求我們分享我們的操作方式,因此我們決定將其作為免費插件發布。

3.視頻的延遲加載

在WordPress中延遲加載視頻

視頻嵌入了來自外部網站的加載腳本,這對頁面加載速度和性能影響很小。

視頻的延遲加載通過僅在頁面加載時加載視頻圖像來解決此問題。 僅當用戶單擊播放按鈕時,它才會加載嵌入代碼。 請參閱我們的教程,了解如何在WordPress中為視頻添加延遲加載。

順便說一句,如果您使用Smash Balloon YouTube Feed,則不需要此插件,因為它具有內置的緩存功能並延遲了視頻播放器的加載。

為什麼我不能將視頻上傳到WordPress?

可以,但是我們不建議您這樣做。

大多數小型博客使用共享的WordPress託管帳戶,而視頻會佔用大量服務器資源。 如果您的視頻流量巨大,則您的網站更有可能崩潰。

其次,您錯過了YouTube用戶的訪問量。

YouTube不僅是最大的視頻託管網站,還是全球第二受歡迎的搜索引擎,僅次於Facebook也是第二受歡迎的社交網絡。

如果您不想將視頻上傳到YouTube,則可以嘗試使用Vimeo或DailyMotion。 查看我們對YouTube與Vimeo的比較,以了解哪個平台更適合您的需求。

有關此主題的更多信息,請查看我們的文章,其中介紹為什麼您永遠不應該將視頻上傳到WordPress。

我們希望本文能幫助您學習如何輕鬆地將視頻嵌入WordPress博客文章。 您可能還希望查看我們所有網站都必須具有WordPress插件的列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。