如何在 WordPress 中嵌入視頻(YouTube + 更多)

已發表: 2020-09-02

不確定如何在 WordPress 中嵌入視頻?

將視頻內容添加到您的網站是改善網站停留時間和頁面停留時間的好方法,這可以為您的 SEO 帶來間接好處。 不過,嵌入視頻不僅僅是為了讓 Google 等搜索引擎感到高興——使用視頻還可以幫助您與訪問者建立聯繫並促使他們採取行動。

值得慶幸的是,WordPress 包含大量工具和方法,您可以使用它們將視頻嵌入到您的內容中。

在這篇文章中,我們將盡可能多地介紹它們。 無論您使用的是塊編輯器 (Gutenberg)、經典編輯器還是 Elementor,我們都會向您展示如何從 YouTube、Vimeo、您自己的服務器和許多其他方法嵌入視頻。 我們還將分享一些其他技巧,例如如何嵌入觀看者無法分享的私人視頻。

無論您在何種場景中工作,在本文結束時您都應該具備所需的知識。

目錄

  • 如何在 WordPress 中嵌入視頻
  • 如何在 WordPress 古騰堡編輯器中嵌入視頻
  • 如何在 WordPress 經典編輯器 (TinyMCE) 中嵌入視頻
  • 如何在 Elementor 中嵌入視頻
  • 如何在 WordPress 中嵌入 YouTube 視頻
  • 如何在 WordPress 邊欄中嵌入視頻
  • 如何嵌入來自其他來源(Vimeo、DailyMotion 等)的視頻
  • 如何在 WordPress 上自託管視頻
  • 如何為 WordPress 會員網站/課程嵌入私人視頻
  • 以最簡單的方式在 WordPress 中嵌入視頻 — 使用 Elementor

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

下面,我們將介紹使用各種不同方法將視頻文件插入 WordPress 網站的所有不同方式。

為確保這是一份全面的指南,我們將詳細介紹每個選項,這意味著各部分之間會有一些重疊。 例如,當我們向您展示如何在 Elementor 中嵌入視頻時,我們將使用 YouTube 作為示例。

讓我們深入了解……

如何在 WordPress 塊編輯器中嵌入視頻 (Gutenberg)

如果您使用的是 WordPress 塊編輯器,AKA Gutenberg,它帶有內置塊,可幫助您嵌入來自各種來源的視頻。 我們將向您展示這些塊如何與 YouTube 配合使用,但相同的基本操作也適用於其他視頻服務。

首先,您需要添加要嵌入視頻的YouTube塊:

WordPress YouTube Block

然後,粘貼視頻的直接 URL(從瀏覽器地址欄複製)並點擊嵌入 然後,您應該會在編輯器中看到視頻的實時預覽:

the embed option in the youtube block

塊編輯器帶有用於以下服務的專用視頻嵌入塊:

  • YouTube
  • 維密歐
  • 阿尼本
  • 每日運動
  • 截屏
  • 抖音
  • 視頻新聞

WordPress.tv

如何在 WordPress 經典編輯器 (TinyMCE) 中嵌入視頻

如果您沒有使用新的 WordPress Block 編輯器,您仍然可以使用 Classic TinyMCE 編輯器輕鬆嵌入視頻。

Classic 編輯器包含所有與新 Block 編輯器相同的嵌入集成 - 它只是沒有讓它們變得那麼明顯,因為它沒有每個源的“塊”。

要使用這些嵌入集成,您只需將直接 URL 粘貼到 Classic 編輯器的Visual選項卡。 然後,WordPress 會自動為您嵌入視頻。


例如,要在 WordPress 中嵌入 YouTube 視頻,您首先要從瀏覽器地址欄中復制視頻的直接鏈接。 然後,只需將視頻 URL 粘貼到編輯器中,WordPress 將完成剩下的工作——這是一個 GIF 向您展示它是如何工作的:

閱讀我們博客上與 HTML 代碼相關的文章,以獲得有關 Web 內容編寫的最佳技巧。

a gif of Embedding the video

您可以對其他平台(如 Vimeo、DailyMotion 等)使用相同的方法。

如何在 Elementor 中嵌入視頻

Elementor 包含自己的 Videowidget,可以非常輕鬆地將視頻嵌入到您的內容中。

首先,將視頻小部件添加到內容中要包含視頻的位置。 然後,從四個選項中選擇來源:

  • YouTube
  • 維密歐
  • 每日運動
  • 自託管

做出選擇後,您只需將鏈接粘貼到視頻中即可。 如果您有 Elementor Pro,您還可以使用其動態內容功能從自定義字段動態插入視頻鏈接。

然後,根據您的喜好配置其他設置。 例如,您可以自動播放視頻、禁用播放器控件等。

Elementor's Video Widget

為了提高性能,您可以使用圖像疊加功能來顯示靜態圖像並延遲加載視頻。 這將等待加載視頻,直到用戶與之交互,這將加快您網站的加載時間。

使用 Elementor Pro,您還可以訪問媒體輪播小部件,它允許您創建包含來自 YouTube 或 Vimeo 的嵌入視頻的輪播/滑塊。 在小部件的設置中,為幻燈片類型選擇視頻,然後:

  • 添加縮略圖。

視頻鏈接框中輸入指向 YouTube 或 Vimeo 視頻的鏈接

Elementor's Media Carousel Widget

借助第三方 Elementor 附加組件,您還可以訪問其他小部件,以幫助您在 Elementor 中處理視頻。 例如,Elementor Ultimate Addons 為您提供了一個新的可過濾視頻庫小部件。