首页 > 文章专栏 > 正文

如何在WordPress博文中轻松嵌入视频

你是否曾为你的观众制作了完美的视频,却卡在如何将它嵌入 WordPress 博客文章?这确实令人沮丧,你可能还会担心添加视频会拖慢网站速度,或者需要处理复杂的代码。

在猫哥,我们经常在教程中添加视频,并找到了在 WordPress 中嵌入视频的最简单方法。好消息是,WordPress 让这个过程变得异常简单,你无需成为技术专家也能轻松搞定。

在本指南中,我们将向你展示如何在 WordPress 文章、页面甚至侧边栏小工具中嵌入视频。

How to easily embed videos in WordPress blog posts (4 ways)

为什么要在 WordPress 博客文章中嵌入视频?

在 WordPress 博客中添加视频是吸引访客注意力、提升用户参与度和转化率的绝佳方式。视频能增加用户在网站上的停留时间,而且有些访客可能更倾向于观看视频而非阅读文字。

在猫哥,我们会在最受欢迎的 WordPress 教程中嵌入视频。

是否应该直接将视频上传到 WordPress?

呃,技术上你可以这么做,但我们强烈不建议。大多数小博客使用的是共享 WordPress 托管账户,视频文件会占用大量服务器资源。如果你的视频获得大量流量,网站很可能会崩溃。我们推荐使用 Hostinger 托管服务,性价比高,性能稳定,但即便如此,仍不建议直接上传大视频文件。

其次,你会错过来自 YouTube 等视频托管网站的流量。YouTube 不仅是最大的视频托管平台,还是世界第二大搜索引擎和第二大社交网络,仅次于 Facebook。

如果你不想将视频上传到 YouTube,还可以使用 Vimeo、Jetpack Video、Wistia 等其他平台。

更多细节,请参阅我们的文章:为什么永远不要将视频上传到 WordPress 媒体库

现在,让我们一步步教你如何在 WordPress 中嵌入视频。使用下面的快速链接直接跳转到你想用的方法:

  • 方法 1:使用区块编辑器在 WordPress 文章和页面中嵌入视频
  • 方法 2:使用旧版经典编辑器在 WordPress 中嵌入视频
  • 方法 3:如何在 WordPress 侧边栏小工具中嵌入视频
  • 方法 4:使用 WordPress 视频嵌入插件来嵌入视频
  • 关于在 WordPress 中嵌入视频的常见问题
  • WordPress 视频相关资源

如果你更喜欢文字说明,请继续阅读。

方法 1:使用区块编辑器在 WordPress 文章和页面中嵌入视频

WordPress 自带一个强大的功能叫自动嵌入,它允许你的网站自动从 YouTube、Vimeo 等热门视频托管服务获取嵌入代码。你只需将视频 URL 粘贴到 WordPress 编辑器中即可。

例如,复制你想嵌入的 YouTube 视频 URL。

然后,编辑你要添加视频的 WordPress 文章或页面,直接将 URL 粘贴到内容区域。

Paste video embed code in block editor

粘贴视频 URL 后,WordPress 会立即获取嵌入代码,并在内容编辑器中显示该 YouTube 视频。这个功能是 WordPress 内置的,无需任何插件。

现在,你可以点击“更新”或“发布”按钮保存文章,查看嵌入的视频。

是不是很简单?

添加视频后,你可以点击编辑器中的视频,通过弹出工具栏自定义设置。你可以调整视频宽度、更改对齐方式等。还可以添加标题,并在移动设备上保持视频的宽高比。

Edit video display options in block editor

WordPress 只能对白名单中的视频服务进行自动嵌入。对于其他网站,你仍需获取嵌入代码,然后粘贴到博客文章中。

WordPress 可以通过粘贴链接自动嵌入来自数十个热门网站的内容。最常用的视频和内容分享平台均支持,包括:

  • TikTok
  • TED
  • Tumblr
  • Vimeo
  • YouTube

注意:过去可以自动嵌入 Facebook 和 Instagram 内容,但由于 Meta 的 API 变更,现在你需要使用专门的社交插件(如 Smash Balloon)来嵌入它们的视频。

如果你使用其他服务,这里是 WordPress 支持自动嵌入的完整网站列表(按字母顺序):

Amazon, Animoto, Cloudup, CollegeHumor, Crowdsignal, Dailymotion, Facebook, Flickr, Hulu, Imgur, Instagram, Issuu, Kickstarter, Meetup.com, Mixcloud, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Someecards, SoundCloud, Speaker Deck, Spotify, TED, Tumblr, VideoPress, Vimeo, WordPress.tv, X (原 Twitter), YouTube

如果你想嵌入的视频来自不在自动嵌入列表中的平台,或者自动嵌入功能失效,别担心!你只需使用该视频的完整 HTML iframe 嵌入代码即可。

在 YouTube 上,点击视频下方的“分享”按钮,然后选择“嵌入”。你会看到一段可以复制的 iframe 代码。Vimeo 的操作方式类似:点击任何视频上的分享图标,然后选择“嵌入”选项卡复制代码。

获得代码后,在 WordPress 编辑器中添加一个“自定义 HTML”区块,然后将 iframe 代码粘贴进去。

Add video embed HTML code

要了解更多,请参阅我们的新手指南:如何在 WordPress 代码编辑器中编辑 HTML。

请记住,在一页上嵌入多个视频可能会影响你的 Core Web Vitals 并拖慢网站速度。这是因为每个嵌入会同时加载第三方跟踪脚本和视频播放器。解决方法请参考下面的方法 4,我们介绍了一个免费插件,它只在用户点击播放按钮时才加载视频播放器。

✨ 专业提示:嵌入视频后,你可以帮助它在搜索结果中排名更高!使用 All in One SEO (AIOSEO) 等插件,可以轻松为文章添加视频 SEO 结构化数据。这能告诉 Google 更多关于视频的信息,有助于在搜索结果中显示吸引人的视频缩略图,从而提升流量。关于 SEO 优化,你也可以参考我们的 GEO 与 SEO 优化指南

方法 2:使用旧版经典编辑器在 WordPress 中嵌入视频

如果你仍在使用 WordPress 经典编辑器,操作步骤是一样的:复制视频 URL 并粘贴到编辑器中,即可自动嵌入。

Embed video in classic editor

你不会有区块编辑器中的宽度调整和对齐选项。完成后,点击“更新”或“发布”使更改生效。

方法 3:如何在 WordPress 侧边栏小工具中嵌入视频

就像 WordPress 文章或页面一样,你也可以在侧边栏小工具中嵌入视频。进入 WordPress 后台的“外观” → “小工具”,然后点击“+”添加新区块图标。

注意:如果你使用区块主题,则不会看到“外观” → “小工具”,而是进入“外观” → “编辑器”来添加视频区块到侧边栏或模板区域。

如果你仍在使用经典小工具插件,可以添加一个标准的“文本”小工具到侧边栏,然后粘贴视频 URL 即可。

之后,你可以搜索你使用的具体视频平台,如“YouTube”或“Vimeo”,然后添加其专用区块。这是最简单的方法!

你可能会看到一个通用的“视频”区块,请避免使用它,因为它用于直接上传视频文件到媒体库,考虑到性能原因我们不推荐这样做。

然后,点击你想要的视频类型区块,例如 YouTube、Vimeo、TED 等。

Add new video block to widget

接下来,将视频 URL 粘贴到框中,点击“嵌入”按钮,视频就会自动添加到小工具区域。然后点击“更新”按钮,视频小工具就会在你的 WordPress 网站上生效。

Enter embed URL and click update

现在,你可以访问网站查看视频。视频的大小会根据小工具区域自动缩放。

Widget video embed example

要了解更多,请参阅我们的指南:如何在 WordPress 中添加和使用小工具。

方法 4:使用 WordPress 视频嵌入插件来嵌入视频

默认情况下,你不需要使用插件来嵌入视频。但你可能想用插件来改善网站上的视频观看体验。以下是一些值得尝试的 WordPress 插件:

1. Smash Balloon YouTube Feed Pro

Smash Balloon YouTube Feeds Pro

Smash Balloon YouTube Feed Pro 是最好的 WordPress YouTube 视频画廊插件。免费版已在超过 10 万个网站上活跃使用,使 Awesome Motive 系列的 Smash Balloon 插件成为 WordPress 生态中最值得信赖的 YouTube 解决方案之一。我们在自己的网站上使用了它,并测试了所有功能。详情请查看我们的完整 Smash Balloon 评测。

它允许你以可自定义的画廊格式自动嵌入所有 YouTube 频道视频。它会自动导入新视频、合并 feed、添加直播功能、嵌入 YouTube 播放列表等。此外,它还包含观看次数、点赞、分享、评论和反应,有助于提升社交证明。

YouTube channel feed example

有免费版本的 YouTube feed 插件,你可以用它简单地将 YouTube 频道 feed 添加到 WordPress。要了解更多,请参阅我们的指南:如何在 WordPress 中显示来自 YouTube 频道的最新视频。

你还可以将 Smash Balloon YouTube feed 插件与 Social Wall 插件结合使用,该插件可以在一页上整合来自 Facebook、Instagram、Twitter 和 YouTube 的所有社交媒体内容。

2. Smash Balloon TikTok Feed Pro

Smash Balloon TikTok Feed Pro

TikTok Feed Pro(同样来自 Smash Balloon)是一个强大的插件,让你可以轻松地在 WordPress 网站的任何位置嵌入 TikTok 视频。当你在 TikTok 频道发布内容时,它会自动推送到你的网站,并以漂亮的视频画廊 feed 显示。你可以选择多种布局,包括网格、轮播、列表和瀑布流。

Smash Balloon TikTok feed example

拖放式 feed 编辑器让你完全控制 TikTok feed 的外观。你可以设置显示的视频数量,自定义颜色、样式、间距等。此外,它还提供有用的内容审核工具,可以根据关键词或标签过滤视频,从而为网站的不同部分创建针对特定内容的精选 feed。

还有免费版本的 Feeds for TikTok 插件,可用于在 WordPress 中添加简单的 TikTok feed。更多详情请参考我们的指南:如何在 WordPress 中嵌入 TikTok 视频。

3. Envira Gallery

Envira Gallery

Envira Gallery 是市场上最好的 WordPress 画廊插件。我们在一些网站上使用它创建了漂亮的相册。详情请查看我们的 Envira Gallery 评测。你可以用它轻松创建 WordPress 相册,它还附带一个视频扩展,用于显示美观且响应式的视频画廊。你可以从 YouTube、Vimeo、Twitch、Dailymotion 等创建视频画廊。甚至可以显示你个人账户中的 YouTube 播放列表,并支持从特定时间戳开始播放 YouTube 视频。Envira 使用非常简单:只需输入你的 YouTube 视频 URL,智能系统会自动抓取视频缩略图。有免费版的 Envira Gallery,但需要高级版才能使用视频画廊功能。

4. YouTube Subscribe Bar

YouTube Subscribe Bar

YouTube Subscribe Bar 会在你的 YouTube 视频嵌入下方显示一个 YouTube 订阅按钮。它还会获取你的 YouTube 订阅者数量,增加社交证明,鼓励更多用户订阅你的频道。我们最初创建它就是为了推广猫哥的 YouTube 频道。许多用户询问我们是如何做到的,所以我们决定将其发布为免费插件。与任何免费仓库插件一样,请确保它与你的当前 WordPress 版本兼容后再安装。

5. Lazy Load for Videos

Lazy Load for Videos

Lazy Load for Videos 解决了加载外部网站视频嵌入脚本的问题,这些脚本会影响网站加载速度和性能。它只在用户点击播放按钮时才加载嵌入代码。顺便说一句,如果你使用 Smash Balloon YouTube Feed 插件,则不需要这个插件,因为它内置了缓存和延迟加载视频播放器功能。

关于在 WordPress 中嵌入视频的常见问题

在帮助成千上万的用户使用 WordPress 网站后,我们回答了许多关于添加视频的问题。以下是其中一些最常见问题的答案:

1. 为什么我不能直接将视频上传到我的 WordPress 网站?

虽然技术上你可以将视频上传到媒体库,但我们强烈建议不要这样做。视频文件非常大,会消耗大量托管服务器资源,可能严重拖慢甚至导致网站崩溃。

2. 如何让嵌入的视频在移动设备上自适应?

WordPress 区块编辑器让这变得非常简单,因为它会自动处理响应式!原生视频区块(如 YouTube 或 Vimeo 区块)会自动调整宽高比,让视频在桌面端、平板和移动设备上完美显示,无需你额外操作。

3. 展示整个 YouTube 视频画廊的最佳方式是什么?

最简便的方法是使用专用插件。我们推荐 Smash Balloon YouTube Feed Pro,因为它能自动从你的 YouTube 频道拉取最新视频,并以可自定义的画廊形式显示在网站上。

4. 嵌入多个视频会影响页面加载速度吗?

是的,嵌入视频会影响网站性能,因为它需要加载来自第三方网站(如 YouTube)的脚本。一个很好的解决方案是使用 Lazy Load for Videos 等插件,它能在访客实际点击播放按钮之前阻止视频播放器加载。

5. 为什么我嵌入的视频在 WordPress 中不显示?

最常见的原因是视频 URL 粘贴到了已有其他文本的行上。请确保 URL 在编辑器中独占一行,且该行没有其他内容。如果问题仍然存在,请检查该平台是否在 WordPress 的自动嵌入列表中。如果不在,则需要使用该平台的 HTML 嵌入代码,如方法 1 所述。

WordPress 视频相关资源

现在你已经掌握了嵌入视频的基础知识,可以查看以下其他有用的指南,将视频策略提升到一个新水平:

  • 如何正确设置 WordPress 视频 SEO
  • 最佳视频编辑软件推荐(针对新手)
  • 如何为你的业务成功启动 YouTube 频道
  • 如何利用视频会员网站来增长邮件列表

如果你喜欢这篇文章,请订阅我们的 YouTube 频道 获取更多 WordPress 视频教程。你也可以在 TwitterFacebook 上找到我们。

文章标签:#WordPress#YouTube#网站性能#视频嵌入#视频插件

版权声明:本文为「猫哥建站」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

本文链接:https://maogeo.top/blog/如何在wordpress博文中轻松嵌入视频