如何在 WordPress 中将视频添加为全屏背景

视频很棒，它们提供了比图片更吸引人的媒体并捕捉到更多的情感。

现在，越来越多的网站管理员/品牌正朝着将视频作为完整背景嵌入他们的网站的方向发展。 但是，将视频嵌入背景的复杂性需要一些技术专长。

为了让读者的一切变得简单而美好，我们将列出一个免费插件，将视频嵌入到背景中，并详细介绍如何通过简单的配置将视频嵌入到背景中。

注意：需要一些编码经验才能完全理解内容。 如果看起来有些混乱，请随时在评论中提问。

在 WordPress 中将视频添加为全屏背景的插件

插件很棒，只需点击几下即可提供所需的功能。 在继续介绍如何使用编码将视频嵌入背景的详细教程之前，我将列出一些插件。

1. mb .YTPlayer 用于背景视频

用于背景集成的流行视频插件之一。 该插件在页面元素内集成了一个自定义播放器。

使用该插件，用户可以轻松地将视频集成到页面和发布中。 安装很简单，插件会生成一个简码以便于集成。

该插件不完全支持响应式布局。

完整的详细信息和下载 | 演示

2.具有动画效果的滑块英雄

该插件的目的是使您能够在 WordPress 中嵌入带有滑块效果的视频背景。 该插件提供 11 种背景动画、添加背景音乐、YouTube 和 Vimeo 视频集成等功能。

该插件与任何 WordPress 主题或编辑器（如 Gutenberg）兼容，因此它可以在所有 WordPress 网站上快速响应。

完整的详细信息和下载 | 演示

现在，真正的部分来了。 下一部分需要 WordPress 平台的编码和技术工作。

视频嵌入需要很多步骤。 让我们一步一步完成。 一旦你理解了这些步骤，你就可以理解一件简单的事情会变得多么复杂。

1. 使用 Div 为视频腾出空间。

2. 以绝对或固定方式将 Div 定位到视口的左上角。 下一步是将其高度和宽度设置为 100%，然后将 z-index 设置为 1。Z-index 定义了内容的深度。

3. 使用 JavaScript 缩放 Div 视频。

4. 每次用户缩放视频时，监视器屏幕都会调整大小并再次缩放视频。

5. 确保代码适用于不同的浏览器和移动操作系统。

看起来有很多编码，但我们将使用一个简单的自定义插件来自动将视频嵌入到 WordPress 帖子或页面的背景中。

BG视频：下载

下载插件并继续正常安装（就像其他插件安装一样）。

这个简单的插件与简码配合使用，插件中提供了一个名为“bgvideo”的简码。 短代码充当将视频嵌入任何页面或帖子的网关。

在继续之前，我们需要为短代码提供一些参数以获取其完整功能。

参数是高度、宽度、mp4、webm、ogg、自动播放、循环、静音和固定。 高度和宽度分别是指视频的高度和宽度。 mp4、webm、ogg 字段是指相应视频格式的 URL。 您必须提供每种格式的 URL，以便视频可以在多个设备上运行而不会出现任何问题。

将视频添加到媒体库

下一步包括将视频添加到媒体库。 确保将所有格式（webm、ogg、mp4）添加到媒体库中。

在 bgvideo 的帮助下，视频短代码被转换为 bgvideo。

视频短代码如下所示

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video宽度=”1280″ 高度=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href="http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg"><img%class="alignnone size-large wp-image-1392" src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

不要忘记删除视频短代码和锚标记前面的百分比（％）符号。

在 bgvideo 的帮助下，上面的代码将转换为下面的代码

[bgvideo宽度=“1280”高度=“720” 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  海报="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  固定=“否”]

该插件会自动将视频短代码更改为 bgvideo 短代码。

使视频对用户透明

完成所有设置后，您需要在页面 CSS 属性中做点小魔术。 原因是页面内容阻碍了视频的显示。

CSS 将删除页面的内容，让访问者的视频闪耀。

插入下面的 CSS 代码以使一切正常。

＃页{

背景：无；

}

要完全设置视频背景，还需要进行许多其他调整。

包起来

对于我们的读者来说，最好的选择是使用成熟的插件并忽略编码部分——如果你不知道编码，编码部分只会让事情变得更糟。 您可以将需求转移给您的开发人员，但这并不是免费的。

另一个很好的替代解决方案是使用动画 GIFS 作为背景。 使用动画 GIFS 有两个原因。 与视频相比，第一个是低带宽使用，第二个是易于安装。 另一个很大的优势是您可能不需要担心便携性和其他设备兼容性问题。

动画可以很容易地使用 CSS 形成或通过正常的背景变化上传。

视频背景的复杂性有点高，WordPress 社区或核心团队可以注意到它并在他们即将发布的版本中进行更改。

如果您有视频并想转换为 gif，那么有在线资源可以为您完成。 但是转换后的 GIF 没有经过优化，并且带有很大的分量。

当您需要对计划嵌入的视频进行调整时，您可以找到一些很棒的免费视频编辑器。 您可能需要剪切、裁剪或缩放视频，添加文本，或者可能调整颜色主题以使其与您网站的风格相匹配。

如果您使用的是 Mac，自然可以使用 iMovie，因为它已经预安装在您的计算机上（如果没有，您可以免费获得它）。 如果您使用的是 Windows – VSDC 免费视频编辑器是一个不错的选择。 它拥有您可能需要的一切，从基本的分割/裁剪工具集到色彩校正和视频风格预设。 此外，它在格式方面非常强大，您无需牺牲输出文件的质量。

你觉得，我错过了什么吗？ 在下面发表评论，让我们知道。

*最后更新时间 2019 年 2 月 25 日