自动播放背景视频是许多网站主页上的一项流行功能，从大型电子商务品牌到 B2B 软件和服务公司。您可以使用增加的视觉兴趣来吸引新访客的注意力并展示您的品牌个性。使用 WordPress 可以轻松设置视频背景。但是，它也可以很容易地以阻碍网站性能和 SEO 工作的方式无意中实施。
他们网站上经常用Patagonia的视频背景
在本文中，我们将介绍放置自动播放背景视频时要考虑的关键因素。然后，我们将学习如何为用户和搜索引擎优化该功能。
第 1 步：选择正确的方法在您的主页上获取视频
选项 A：从视频托管平台嵌入代码
您可以使用此选项以获得最大的灵活性，但它也需要少量的技术知识。只需将原始 HTML 嵌入代码输入“嵌入”Gutenberg 块，或者如果您直接编辑，则输入页面的源代码。使用 CSS 确保视频符合您想要的设计。
如果您对一些轻量级的开发工作感到满意并且想使用像 Wistia 或 Vimeo 这样的托管平台，那么此选项是理想的选择。这样，您可以直接在托管平台内优化视频的风格和外观。然后，您可以通过嵌入代码将其带到您的网站。
选项 B：通过 Gutenberg 编辑器的封面块
此选项是迄今为止在 WordPress 中包含视频背景的最简单方法。但是，此方法会产生性能问题，因为它需要您在您的网站上自行托管视频。您最终会在每次页面加载时加载全尺寸视频文件。这可能会导致速度显着下降并影响用户体验。
要使用此方法，只需在古腾堡编辑器中选择“封面”块并上传您要使用的视频即可。
古腾堡的“封面”区块提供了一个简单的解决方案
如果您愿意，您可以在此处在视频上添加文本叠加层。
选项 C：将 Elementor 与 YouTube 结合使用
如果您在 WordPress 网站上使用 Elementor 页面构建器，则有一个内置功能可让您包含视频背景。这个简短的视频很好地演示了如何做到这一点。这很简单。只需在 Elementor 中选择一个全角模板，添加一个背景视频元素，瞧！
使用 Elementor，您还可以上传自己的视频并在网站上自行托管。然后将使用 HTML5 video 标签播放视频。另一种选择是包含 YouTube 链接。如果您要走这条路，我强烈推荐 YouTube 选项。这有助于避免在从您自己的网络托管服务商提供视频时可能出现的性能问题。
在这里，您可以通过指定循环的起点和终点来选择要在背景中循环的视频部分。
选项 D：使用专用插件
有许多免费插件可用，例如 Premium WordPress Backgrounds，其中包括自动播放背景视频的功能。 Advanced WordPress Backgrounds 允许您添加来自 Vimeo 或 YouTube URL 的视频，以及自托管。出于与 Elementor 方法相同的原因，我会推荐前一个选项。
最后，每种方法都各有利弊。如果你有技术技能，我建议直接进入代码并包括嵌入，然后调整 CSS 以适应。但是，如果这超出了您的技能范围，请选择插件或 Elementor 选项。
阅读更多：哪个是最适合 SEO 的视频托管平台？ »
第 2 步：在 WordPress 中异步加载背景视频
自动播放背景视频可能导致的一个主要问题是加载缓慢。
如果用户的带宽连接有限，则页面的其余元素可能会加载，而视频背景可能要到很晚才会出现。或者，更糟糕的是，如果实施不当，缓慢加载的视频可能会阻止其他关键页面元素呈现。无论哪种情况，这不仅会影响用户体验，还会对搜索排名产生负面影响 - 特别是考虑到 Google 偏爱快速流畅的网站。
要避免这两种情况，请确保将视频设置为使用异步加载JavaScript 使其他页面元素和视频同时加载。此外，请确保您使用支持自适应流式传输的平台托管您的视频，例如 YouTube、Vimeo 或 Wistia。自适应流媒体是指视频主机响应用户的带宽动态降低视频比特率。
虽然从技术角度来看这听起来有点挑战，但实际上并非如此！因为 Yoast Video SEO 插件会为您完成这一切，确保所有内容都能快速无缝地加载。如果您还没有为您的网站设置它，请立即执行下一步！
第三步：选择循环，尽量简短
自动播放的背景视频需要循环播放。因此，选择正确的顺序对于提供引人入胜的体验至关重要。您执行此操作的方式在很大程度上取决于视频的拍摄方式。如果视频有很多剪辑和场景变化，每次场景旋转几秒钟效果很好。它几乎提供了预期视频的“预览”。
但是，对于具有更多一次性或动画感的视频来说，情况就不同了。相反，您需要找到一个序列，其中循环的开始和结束看起来非常相似。这是为了帮助他们很好地融入彼此。
在编辑时考虑您希望循环如何工作很重要。理想情况下，您应该专门为此目的编辑视频。但是，如果您不能使用一些您无法重新编辑的预先存在的内容，请尝试在现有资产中找到一个可以很好地相互融合的起点和终点。然后使用您的托管平台或 WordPress 中的工具（例如使用古腾堡方法）来指定起点和终点。
自动播放背景视频的时长通常应在 10-30 秒左右。你需要足够的运动和变化来提供一些通过循环的叙述和视觉进展。但是您不希望视频太长太复杂以至于分散了页面其余部分的注意力。
第 4 步：确定您的视频背景是否应为点击播放并删除额外的播放器元素
基本上有两种类型的自动播放背景视频。它们要么充当完整视频的预告片，要么纯粹作为独立的视觉资产存在。在第一种情况下，您希望您的视频具有附加功能。您需要一个播放按钮，通常通过叠加层/灯箱将用户带入全屏视频体验。在第二种情况下，您想要删除所有播放器元素，因此视频仅显示为动态图像，而不是带有可见控件的图像。
当您希望视频充当移动缩略图以获得更好的体验时，这需要一些额外的工作。 Wistia 嵌入本机以提供此功能，一个很好的例子是 SparkToro 主页。
如果您使用的是不同的平台，那么您实际上需要在自动播放视频上添加一个播放按钮单击时位于顶部的辅助视频。
您可以使用大多数付费托管平台（例如 Vimeo 和 Wistia）删除播放器控件。但是，如果您使用的是标准 YouTube 嵌入并希望删除播放器控件，则需要通过辅助播放器来完成。这是因为 YouTube 播放器不允许您删除元素。步骤 1 中详述的选项 C 和 D 提供了解决方案。
第 5 步：确保视频背景在移动设备上正确缩放
在 WordPress 中自动播放背景视频的另一个常见错误是确保良好的移动功能。在移动设备上以标准垂直框架观看 16×9 宽屏视频时非常小。因此，页面的整体呈现方式需要完全不同。
视频可以相应地调整为较小的大小，其余页面元素会重新排序并随之移动。或者视频可以隐藏在较小的屏幕尺寸上。通常，我更喜欢将视频与页面的其余部分一起缩小，并使用 CSS 确保核心文本和菜单可见，即使尺寸较小。
要避免的核心错误是嵌入一个被截断的巨大视频，或者在移动视图中占据整个页面。再一次，Yoast Video SEO Plugin 是你的朋友！它会自动确保视频在所有主要视频托管平台上都能响应。
最后的优化步骤是确保包含 Google 搜索所需的所有 Schema.org 元数据，特别是视频标题、缩略图和时长。请注意，作为自动播放的视频，缩略图本身永远不会向用户显示。但是，需要通过微数据或 JSON-LD 在 Schema.org 数据中引用图像文件。这确保了视频可以在 Google 搜索中呈现为视频丰富网页摘要。
听起来很复杂？别担心，Yoast Video SEO 插件会自动为您完成！有关 SEO 所需数据的更详细分类，请查看这篇关于如何优化视频页面的帖子。
让您的视频出现在搜索结果中！
获取这个插件，让您的视频有资格出现在 Google 视频轮播和 Google 视频搜索结果中！
获取视频 SEO »1 个网站，每年仅需 79 美元，不含增值税
Phil Nottingham
Phil Nottingham 是一名营销策略师，专门从事视频 SEO 和品牌策略和搜索引擎优化。
下一个！
出处
