WordPress新增影片的2種方式,無需安裝額外插件

WordPress新增影片配圖
使用WordPress自帶元素或者是代碼的方式添加視頻,這2種WordPress添加視頻的方式都無需安裝額外插件。
文章目錄

本篇文章共916 字,預計閱讀時間4 分鐘

使用自帶元素為WordPress添加視頻

複製YouTube影片網址
WordPress新增影片的2種方式,無需安裝額外外掛程式24 - Well建站

在開始添加影片之前,先打開Youtube,選擇自己要新增的視頻,複製該視頻URL。

古騰堡編輯器添加視頻

古騰堡添加視頻元素
WordPress新增影片的2種方式,無需安裝額外外掛程式25 - Well建站

在古騰堡編輯器中添加影片元素。

貼上視訊網址
WordPress新增影片的2種方式,無需安裝額外外掛程式26 - Well建站

貼上之前複製的視訊地址。

效果展示
WordPress新增影片的2種方式,無需安裝額外外掛程式27 - Well建站

影片添加成功。

Elementor編輯器新增視頻

Elementor新增影片元素
WordPress新增影片的2種方式,無需安裝額外外掛程式28 - Well建站

在Elementor中搜尋影片元素並新增。

貼上影片連結
WordPress新增影片的2種方式,無需安裝額外外掛程式29 - Well建站

資源選擇YouTube,然後貼上先前複製的連結。

效果展示
WordPress新增影片的2種方式,無需安裝額外外掛30 - Well建站

Elementor新增影片成功。

使用代碼的方式添加視頻

複製YouTube影片嵌入程式碼
WordPress新增影片的2種方式,無需安裝額外外掛31 - Well建站

在使用程式碼新增影片之前,先點擊YouTube影片底部的分享按鈕並選擇嵌入。

複製YouTube影片嵌入程式碼2
WordPress新增影片的2種方式,無需安裝額外外掛32 - Well建站

然後複製影片的嵌入程式碼。

古騰堡編輯器添加視頻

古騰堡新增HTML元素
WordPress新增影片的2種方式,無需安裝額外外掛33 - Well建站

在古騰堡搜尋HTML元素並新增。

貼上嵌入程式碼
WordPress新增影片的2種方式,無需安裝額外外掛34 - Well建站

將複製好的嵌入程式碼貼到HTML元素中。

預覽效果
WordPress新增影片的2種方式,無需安裝額外外掛35 - Well建站

點擊預覽查看效果。

Elementor編輯器新增視頻

Elementor新增HTML元素
WordPress新增影片的2種方式,無需安裝額外外掛36 - Well建站

在Elementor搜尋並新增HTML元素。

貼上嵌入程式碼
WordPress新增影片的2種方式,無需安裝額外外掛37 - Well建站

貼上嵌入程式碼。

查看效果
WordPress新增影片的2種方式,無需安裝額外外掛38 - Well建站

預覽效果,高度有點不夠。

在程式碼裡調整高度:

調整程式碼中的高度
WordPress新增影片的2種方式,無需安裝額外外掛39 - Well建站
查看效果
WordPress新增影片的2種方式,無需安裝額外外掛40 - Well建站

調整後的效果。

插入Bilibili視頻

目前插入Bilibili影片只能透過嵌入程式碼的方式(不安裝插件的前提下)。

bilibili影片分享按鈕
WordPress新增影片的2種方式,無需安裝額外外掛41 - Well建站
bilibili影片嵌入程式碼
WordPress新增影片的2種方式,無需安裝額外外掛42 - Well建站

滑鼠放在B站影片下方的分享按鈕上,會顯示嵌入程式碼按鈕,點選複製程式碼。

原有的程式碼格式如下:

bilibili影片嵌入程式碼默然格式
WordPress新增影片的2種方式,無需安裝額外外掛43 - Well建站

在古騰堡或Elementor編輯器中加入HTML元素後,貼上嵌入程式碼到HTML元素即可成功新增。

21 2 - Well建站
WordPress新增影片的2種方式,無需安裝額外外掛44 - Well建站

但是添加完預設的嵌入程式碼後,發現影片的比例不對,寬度也不受控制,而且會自動播放。

所以我們要為程式碼添加寬度、比例和限制自動播放。

修改後的程式碼:

修改bilibili影片嵌入程式碼格式
WordPress新增影片的2種方式,無需安裝額外外掛45 - Well建站
  • 在程式碼中的URL部分最後面添加&自動播放=0,使影片不要自動播放。
  • 為程式碼添加style限制寬度和視訊比例,樣式=”寬度:300px;縱橫比:16/9;”

程式碼修改後,影片的展示效果:

22 2 - Well建站
WordPress新增影片的2種方式,無需安裝額外外掛46 - Well建站

至此,在WP裡加入影片的方法分享結束。

你可能還會關注:WordPress新增FAQ功能

: ) 文章內容均為原創,轉載須註明出處並添加原文鏈接,否則視為侵權
外貿伺服器推薦(Well在用的伺服器)
vultr-徽標
一線品牌VPS伺服器,穩定、不貴、效能強
二線品牌VPS伺服器,穩定、便宜、效能強
文章標籤
文章推薦
文章目錄
相關文章
繁体中文