如何为您的 WordPress 网站添加视频背景

视频背景是网站最出色的功能之一。 它不仅可以使您的网站生动有趣，而且可以展示更多的图像和信息。 但是，我敢打赌，没有多少人知道如何在他们的网站上添加视频背景。 因此，如果您想为网站添加视频背景，这份终极指南将很有帮助。

使用支持视频背景的 WordPress 主题

一些WordPress主题支持显示视频背景，所以你只需要设置主题来展示它。

例如，这个 Clean Blocks 主题支持标题覆盖区域中的视频背景。 然后，您只需要几个简单的步骤即可通过转到“定制器”、找到“标题媒体”部分并遵循主题要求来向其中插入视频。

大多数主题将允许您上传视频。 此外，许多人会像我上面那样支持来自 YouTube 的嵌入链接。 这不仅会更快、更简单，还会帮助网站更轻量级，从而优化网站速度。 每个主题都将以不同的方式定制，因此您需要仔细阅读说明。

但是，在使用主题时，视频背景区域可能会受到限制，因为主题可能仅支持在特定区域运行的视频。 如果您想将视频背景添加到另一个区域怎么办？ 是时候使用插件为您的 WordPress 网站添加视频背景了。

使用插件为网站添加视频背景

有许多插件可以帮助您解决这个问题。 经过研究，我发现高级 WordPress 背景 (AWP) 插件对于那些不太了解技术的人来说非常容易使用。 它还可以帮助您的视频背景精美地显示并提供许多自定义选项。

请注意，此插件仅适用于 WordPress 5.0 版本和 Gutenberg 编辑器。 所以记得更新你的 WordPress 版本并使用这个编辑器。

第 1 步：安装插件

您可以在 wordpress.org 下载此插件，然后转到仪表板>插件>添加新>上传插件，上传、安装并激活它。

或者在Dashboard > Plugin > Add New 中，找到插件并单击Install > Activate 。

第 2 步：添加视频背景

添加视频背景类似于在古腾堡中插入一个块。 所以如果你熟悉古腾堡，那很容易。 如果没有，您可以阅读使用 Gutenberg 的说明。

到要添加视频背景的页面或文章，添加新块，搜索关键词“awb”，找到AWB的背景块。

插入此块后，在右侧边栏中，选择“块”选项卡进行设置。 背景有 3 个选项，分别是图像、颜色和视频。 选择视频以插入视频背景。 然后，您有 2 个选择：插入来自 YouTube 或 Vimeo URL 的视频，或上传自托管视频。

如果您选择第一个选项，您只需将链接插入视频 URL部分。

对于第二个选项，请转到自托管部分。 有3种视频格式可供上传：

选择所需的格式，然后选择库中的现有视频或上传新视频。 而已。

第 3 步：自定义您的视频背景

以全高显示视频并在视频上添加块

插入视频后，它的帧就这么小了。 要以全高显示视频，请选择块工具栏中的全高部分。

下面是全高显示的带有文本的视频背景。 您通常可以在侧边栏的“块”选项卡中自定义文本的大小、颜色、位置等。 如果您想将此视频放在标题封面或号召性用语部分，这将非常有用。

您甚至可以用任何块替换文本。 这类似于插入任何古腾堡块。

视频设置

在“视频”选项卡中，您应该如下设置一些主要部分，以方便地显示您的视频背景：

(1)：您可以在移动设备上启用或禁用背景视频。
(2)和(3)：在这里输入视频的开始和结束时间，以便显示所需的部分，特别是当原始视频太长时。
(4)：完成后可以重复播放视频。 我认为您应该启用此功能以保持视频自动重播。

海报图片设置

向下滚动，您将看到海报图像部分。 您在此处选择的照片将在视频显示前 1 秒显示。 下面的选项允许您自定义图像的适当大小和样式。

这是添加海报图像后的结果。

安装覆盖

(1) 是视频背景的叠加颜色，(2) 是叠加的透明度。 例如，橙色是我网站的主色调，所以我选择了这种颜色的视频叠加层以与网站设计相匹配。

至于调色板，它是视频的替代品。 换句话说，您实际上是从视频背景切换到彩色背景。 要删除此颜色背景，请选择“清除”按钮。

安装视差和鼠标视差效果

在视差选项卡中，您可以打开或关闭这些效果并轻松选择不同类型的视差。 这是一个非常好的和有趣的效果，因此您应该使用它并为您的网站选择合适的样式。

您可能熟悉视差效果，而鼠标视差效果可能不熟悉。 当您将鼠标移到视频上时可以很容易地看到它，那么视频中的场景也会移动。

您可以通过转到鼠标视差>启用部分来使用此效果。 然后你可以调整Size和Speed 。 速度越低，视频移动越快。 尺寸越小，视频移动的越多，让您在视频上移动鼠标时感觉视频很“生涩”。

这是我选择最低速度和尺寸时的示例。

间距设置

在间距选项卡中，自定义从视频到页面边距的距离，在边距和填充部分中输入距离参数。 例如，我为视频的所有 4 个边输入了 10 的填充和 20 的边距。

高级设置

在高级部分的附加 CSS中，您可以为视频背景添加自定义代码。 HTML锚点部分允许您使用关键字链接作为视频标题。 如果您对短代码一无所知，可以跳过这一部分。

而这就是最终的结果。 视频看起来很不错，不是吗？

最后的话

通过这篇超级详细的文章，希望您可以为您的WordPress网站添加视频背景以吸引访问者。 关于AWB插件，你应该将它与eStar等强烈支持古腾堡的主题一起使用。 在这里，我使用 eStar 主题和 AWB 插件为标题封面提供了一个有吸引力的视频背景。

这种完美的组合可能会让视频看起来更迷人，对吧？ 如果您想了解有关 WordPress 的更多提示，请随时在本文下方发表评论并分享您的想法。