在WordPress博客文章嵌入视频,可以丰富网站的内容,增加用户参与度的好方法。WordPress对主流的视频网站YouTube,Vimeo,Facebook,Twitter等兼容良好,可以直接嵌入视频。
本教程主要针对WordPress初学者,展示如何将视频嵌入WordPress博客文章,页面和侧边栏小部件中。
如何在WordPress文章和页面中嵌入视频
WordPress提供强大的自动嵌入功能,该功能支持从流行的视频托管服务(例如YouTube,Vimeo等)中自动获取嵌入代码,您需要做的就是将视频URL粘贴到WordPress编辑器中。
例如,您可以复制要嵌入的视频的YouTube URL。
接下来,编辑要在其中添加视频的WordPress文章或页面,然后将URL粘贴到内容区域中即可。
古腾堡文章嵌入视频
粘贴视频URL后,WordPress将立即获取嵌入代码并在内容编辑器中显示YouTube视频。
最后,保存文章或者页面,然后单击“预览”按钮以查看嵌入式视频展示效果。
WordPress嵌入YouTube视频
添加视频后,可以从右侧的块工具栏和“设置”列更改其设置。
古腾堡编辑器视频块设置
您可以调整视频宽度,使其变为全屏,更改对齐方式等等。还可以添加标题并在移动设备上保留视频的长宽比(即实现响应式)。
WordPress只能对列入白名单的视频服务进行自动嵌入。对于其他网站,您仍然必须获取嵌入代码,然后将其粘贴到博客文章中。
下面是WordPress官方公布的支持自动嵌入视频服务白名单列表:
- Amazon
- Animoto
- Cloudup
- CollegeHumor
- Crowdsignal
- Dailymotion
- Flickr
- Hulu
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- ReverbNation
- Screencast
- Scribd
- Slideshare
- SmugMug
- Someecards
- SoundCloud
- Speaker Deck
- Spotify
- TED
- Tumblr
- VideoPress
- Vimeo
- WordPress.tv
- YouTube
如果要从此列表之外的网站添加视频,则需要该视频的完整HTML嵌入代码。也就是说,国内的优酷视频、腾讯视频、B站视频、爱奇艺视频等,都不能使用自动
只需复制视频网站提供的HTML代码,然后将其粘贴到编辑器中的“自定义HTML”块中即可。
HTML视频嵌入代码
使用经典编辑器将视频嵌入WordPress
如果您使用是WordPress经典编辑器,则可以以相同方式嵌入视频。
只需从YouTube等视频托管服务中复制URL,然后将其粘贴到编辑器中即可。如果使用可视编辑器,则将看到视频的预览。
经典编辑器嵌入视频
但是,您将无法使用WordPress块编辑器那样的方式进行宽度调整和其他选项设置。如果要修改相关参数,则需要切换到文本编辑器修改代码。
如何WordPress侧边栏小工具中嵌入视频
如WordPress页面或文章一样,我们也可以将视频嵌入WordPress边栏小工具中。
只需转到外观»小工具页面,然后将“文本”小工具添加到侧边栏中。
在窗口小工具设置内,将视频URL粘贴到内容区域中。WordPress将自动获取嵌入代码并显示视频。
小工具嵌入视频
不要忘记单击“保存”按钮来保存小工具设置。
最后,访问网站以查看嵌入在WordPress侧边栏小工具中的视频。
能否直接上传视频至WordPress网站?
可以,但是一般不建议这样做,如果你所使用的WordPress网站的服务器配置较低的话。
因为视频会占用大量服务器资源。如果视频流量巨大,这可能导致网站崩溃。
我们建议首选使用第三方视频网站作为网站视频存储,比如优酷、B站、腾讯视频等,使用这些视频网站作为视频存储方,还有一个好处就是,可能通过这些网站给你带来流量。
另外一种网站视频存储方案是,使用CDN服务,比如又拍云、七牛云等CDN服务商;又或者现在十分流行的阿里云的OSS存储、腾讯云的COS存储。
WordPress视频嵌入插件
默认情况下,无需使用插件即可将视频嵌入WordPress。但是,我们也可以使用插件来改善网站播放视频用户体验。
1. Envira Gallery
Envira Gallery插件
默认情况下,WordPress不附带嵌入式视频库功能。如果要在页面上显示视频库,则需要一个插件来完成。
Envira Gallery是WordPress最好的多媒体库插件之一。它还带有一个视频插件,支持使用灯箱弹出窗口以创建漂亮的视频库。
Tips:的主题将提供混合多媒体智能相册功能,支持发布视频、图片混合相册,且实现文章内容图片及视频自动抽离组成相册。
2. Lazy Load for Videos
Lazy Load for Videos插件
视频嵌入了来自外部网站的加载脚本,这对页面加载速度和性能多多少少有一定的影响。
Lazy Load for Videos通过仅需要页面时加载视频图像来解决此问题。即仅当用户单击播放按钮时,它才会加载嵌入代码。你还可以参考如何《在WordPress中为视频添加延迟加载》。