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部分最后面添加&autoplay=0,使视频不要自动播放。
  • 给代码添加style限制宽度和视频比例,style=”width:300px;aspect-ratio:16/9;”

代码修改后,视频的展示效果:

22 2 - Well建站
WordPress添加视频的2种方式,无需安装额外插件 46 - Well建站

至此,在WP里添加视频的方法分享结束。

你可能还会关注:WordPress添加FAQ功能

: ) 文章内容均为原创,转载须注明出处并添加原文链接,否则视为侵权
B2B外贸建站服务 - well建站
Well提供外贸建站服务,高性价比、不玩套路、终身售后。
文章标签
文章推荐
文章目录
相关文章