如何在 WordPress 中创建视频背景部分?
已发表: 2021-12-29增强网站视觉吸引力的一种有效方法是创建视频背景部分。 它会吸引您的访问者并鼓励他们在您的网站上停留更长时间。
WordPress 提供了各种方法,您可以使用这些方法来集成视频背景。
如果您不知道这些方法中的任何一种,请让我们指导您完成整个过程。
在本博客中,您将学习三种轻松添加视频作为背景部分的技巧。
目录
- #为什么在 WordPress 中需要视频背景?
- #选择完美视频背景的提示
- 1. 压缩但高质量的视频
- 2. 短片时长
- 3. 赞美您的网站内容
- 4. 启用/禁用音频的选项
- 5. 响应式视频背景部分
- #创建视频背景部分的三种方法
- 1. 使用网站生成器创建视频背景部分
- 2. 使用 WordPress 插件创建视频背景部分
- 3. 使用 WordPress 主题创建视频背景部分
- 在哪里可以找到您的视频背景部分的库存照片?
- 1. 存在Shutterstock
- 2. Envato 元素
- 3. 像素
- 4.Pixabay
- 常见问题 (FAQ)
- Slider Hero 插件是否支持 YouTube 视频的自动播放功能?
- 哪个视频背景插件最适合我的网站?
- 我什么时候不应该在我的网站上使用视频背景?
- 我应该上传自托管视频还是嵌入 YouTube 视频?
- 我可以从嵌入的 YouTube 视频中删除分享和订阅按钮吗?
- 包起来!
#为什么在 WordPress 中需要视频背景?
我们都知道在我们的网站上添加吸引人的背景图片的重要性。 它们比书面描述更能吸引观众的注意力并且交流得更快。
然而,另一种形式的媒体比图片、图形和其他插图强大 100 倍。 如果您正在考虑视频,那么您可以拍拍自己的背!
YouTube 博客中的两位客座博主提供了统计数据,证明视频比图片无效的交流更重要。 你听说过一张图片能说出一千个单词,对吧?
嗯,根据这些客座博主的洞察力,一个视频讲一百万字。
因此,您可以在您的网站上添加视频作为背景,以便向您的观众传达重要信息。 您可以添加一个简短的视频来描述您的品牌故事,您的产品的工作机制等。
视频部分鼓励您的网站访问者参与其中。 他们可能想要打开媒体音量、放大播放器或重播整个视频。
此外,您的观众在观看介绍视频后会想要更多地了解您的品牌。 如果您的访问者在您的网站上停留的时间较长,您的跳出率就会下降,这也会提高 SEO 性能。
#选择完美视频背景的提示
现在,您知道网站上视频集成的重要性了。 我们为您提供了一些关于选择要添加到您的 WordPress 网站的精彩视频的提示。 以下是您可能会发现有用的五个关键点。
1. 压缩但高质量的视频
您必须先压缩视频文件,然后再将它们上传到后台部分。 具有大视频大小的网站加载缓慢并提供糟糕的用户体验。
此外,Google 不会将您的网站排在相关搜索结果的前几名。 压缩视频将减少服务器的负载,并且您的网站运行得更快。
但是,请确保在压缩时不要破坏视频的质量。 您的观众不想观看模糊的视频。 您必须找到一个中间地带,视频被压缩但仍然具有不错的分辨率。
您可以使用 VideoProc 之类的工具来将视频压缩到最佳尺寸。 VideoProc 转换器工具适用于您使用 GoPro、DJI、iPhone、Android、摄像机或任何其他 4k 相机拍摄的任何视频。
2. 短片时长
将视频添加到您的网站时要考虑的另一件事是使其简短。 首先,在线受众的注意力跨度较低。 他们不会观看提供您整个公司历史的半小时视频。
取而代之的是,上传一个小于 1 分钟且文件较小的短视频。 加载需要很短的时间,并且也会吸引您的网站访问者的注意力。 此外,您还可以循环播放素材。
3. 赞美您的网站内容
只有当视频与您的网站内容相得益彰时,您的访问者才会喜欢它。 例如,您拥有一个咖啡店网站,那么运动自行车视频肯定不会补充您的网站。
断章取义会激怒观众,增加失去注意力的机会。 因此,为您的品牌制作合适的视频以添加到背景中。 您也可以改为显示相关的素材。
4. 启用/禁用音频的选项
当有人进入您的网站时,他们可能不会期待自动播放音频。 您的观众可以在图书馆、办公室、教室或其他安静的地方浏览您的网站。 突然的声音会吓到他们,他们会关闭标签以摆脱它。
自动播放多媒体内容是人们最讨厌的网站属性之一。 您可以通过添加切换选项来启用/禁用音频来避免这种情况。 这样,访问者只能在需要时播放音频。
5. 响应式视频背景部分
您的网站访问者将在各种数字设备上浏览您的内容。 例如,他们可能会在移动设备、笔记本电脑或更多设备上观看您的视频。 非响应式视频不会在所有这些屏幕尺寸上提供相同的尺寸。
因此,您必须使视频背景响应。 使用此功能,您的视频可以在所有显示设备上以正确的尺寸加载。
#创建视频背景部分的三种方法
在您的网站上添加视频作为背景部分有三种主要方法。 在本节中,您将深入了解每种技术。 您可以根据自己的喜好选择这些选项中的任何一个。
1. 使用网站生成器创建视频背景部分
网站/页面构建器非常适合帮助您在不使用代码(HTML、CSS 等)的情况下设计网页。 这些工具还可以帮助您添加各种多媒体组件,如轮播滑块、图像灯箱、动画等。
- Elementor 网站建设者
Elementor 是一个多合一的网站建设插件。 它可以让您设计各种元素,如页眉、页脚、产品页面等。此页面构建器几乎支持所有 WordPress 主题和插件。
首先,从添加新插件页面安装此页面构建器。 转到搜索栏并查找“Elementor. 现在,安装并激活具有发布者名称的第一个选项: Elementor.com 。

现在返回仪表板并将鼠标光标悬停在侧边栏中 Elementor 选项的顶部。 单击下拉菜单中的“开始”按钮。

此操作会将您带到 Elementor 的欢迎页面。 您可以看到“创建您的第一页”按钮。 请点击它继续。
您将到达 Elementor Website Builder 的拖放编辑界面。 让我们使用这个插件创建一个新的页面模板。 单击您在虚线框中看到的文件夹图标,如屏幕截图所示。

它会弹出一个包含大量预先设计的页面模板的弹出窗口。 将鼠标指针悬停在所选布局的顶部。 此操作向您显示一个插入按钮,您需要单击该按钮才能将模板添加到您的网站。

选择其中一个布局后,您会看到另一个窗口。 单击“开始”按钮,将您带到 Elementor 的“注册”页面。 请使用此构建器插件创建一个帐户以继续。

Elementor 为您提供了将您的网站与其模板库连接的选项。 单击连接按钮。 之后,您将返回其编辑界面。
您可以选择要显示视频的任何部分作为其背景。 如果要调整其大小,请单击顶部由六个点表示的“编辑部分”按钮。

现在,您可以从“布局”选项更改其设置,例如高度、宽度和间隙。
请在调整此部分后转到样式选项。 您可以选择四种不同的背景类型:图像、视频、渐变和幻灯片。 选择视频图标并将 YouTube 视频的 URL 粘贴到文本框中。

如果您不想显示 YouTube 视频,则可以上传 MP4 格式的文件。 对于这种方法,您需要从媒体库中复制该视频的永久链接。 之后,将其粘贴到 Elementor 界面中的同一文本框中。

继续前进,您可以调整所选视频的其他设置。 例如,您可以为您的部分自定义背景颜色叠加。 此外,您可以选择是否在移动设备上播放视频。

如果您的视频无法加载,您还可以上传后备图像。 最后,一旦您对背景视频感到满意,请单击“发布”按钮。
- WordPress 页面生成器 – 海狸生成器
Beaver Builder 允许您使用其灵活的拖放界面编辑网站的首页。 它支持各种内容模块,如照片、按钮、标题、图标、音频、视频等。
请转到添加新插件将此构建器扩展添加到您的 WordPress 仪表板。 在搜索栏中插入其名称并选择第一个选项,该选项有 300,000 多个活动安装。

您需要安装并激活此扩展程序,然后转到添加多媒体背景的页面。 如果要创建新页面,请单击页面选项下拉菜单中的添加新按钮。

进入新页面的编辑界面。 由于您安装了此拖放构建器插件,因此您可以从前端自定义页面。 请单击启动 Beaver Builder 按钮,如屏幕截图所示。

此操作会将您带到前端编辑界面。 Beaver Builder 在右侧边栏中显示各种模块,如音频、标题、照片等。单击视频图标并将其拖到虚线框中。

它创建一个视频块并打开一个窗口来调整视频设置。 您应该首先从两个选项中设置视频类型:媒体库和嵌入。 如果您选择了第一个替代方案,您可以上传 MP4 或 WebM 文件格式的视频。

从这些选项中的任何一个中单击“选择视频”按钮。 您需要从媒体库中选择一个视频或从驱动器上传它。 Beaver Builder 允许您进行一些调整,例如上传海报、自动播放和循环切换等。

相反,如果您选择“视频嵌入”选项,它可以让您粘贴 YouTube 视频的 URL。 插入 URL 后,您将在后台预览视频。 进行最终编辑后单击“保存”按钮。

Beaver Builder 在其界面上显示嵌入视频的预览。 请点击右上角的完成按钮。 之后,您会看到四个新按钮:放弃、保存草稿、发布和取消。

之后单击发布以保存您的更新。 我们建议您加载您的网站以检查视频背景的工作情况。 如果您想要替代网站页面构建器,请查看下一部分:插件。
2. 使用 WordPress 插件创建视频背景部分
插件是为您的网站添加额外功能的绝佳方式。 您可以选择各种扩展来为您的网站添加视频背景。 我们已经解释了使用两个插件添加此功能的过程。
- 高级WordPress背景
使用高级 WordPress 背景,您可以显示各种背景类型。 例如,您可以添加图像、图案图像、颜色、上传的视频和 YouTube/Vimeo 视频。
请浏览 WordPress 仪表板中的添加新插件页面。 在搜索栏中输入 Advanced WordPress Backgrounds 并安装结果中的第一个选项。

安装后激活插件。 然后,转到要添加视频背景部分的页面。 对于本教程,我们选择了我们网站的主页。 请点击页面标题底部的编辑按钮。

在主页的编辑布局中,单击加号 (+) 以打开搜索栏。 输入术语“AWB”并选择背景 (AWB) 块选项。 您会在页面中添加一个新块。

在此块中,您可以添加颜色、图像或视频。 单击块设置栏上的类型按钮。 从您在下面的屏幕截图中看到的下拉菜单中选择“视频”选项。
![[屏幕截图名称:指向背景(AWB)块下拉菜单内的视频按钮]](/uploads/article/22800/kMNH1aOWRlJXKipm.png)
该插件提供了一个使用两种方法添加视频的接口。 首先,单击右侧边栏的阻止按钮。 在视频选项下,您可以选择 YouTube/Vimeo 或自托管选项。

当您选择 YouTube/Vimeo 选项时,您会看到一个文本框来输入视频的 URL。 您还可以将视频开始时间设置为从您想要播放的位置精确开始。


另一种选择是自托管视频。 您可以通过选择以下三种格式之一来上传视频:MP4、OGV 和 WEBM。 单击其中一个按钮并从您的媒体库中选择一个视频。

如果您在库中没有视频,请从您的驱动器上传一个。 插入视频后,您可以在同一侧边栏中看到其预览。 之后,单击页面顶部的发布按钮。

- mb.YTPlayer 用于背景视频
背景视频插件的 mb.YTPlayer 可让您将 YouTube 视频集成到您的网站中。 使用其专业版,您可以编辑视频不透明度、质量、纵横比和其他功能。
与之前的插件类似,您可以从 Add New Plugin 页面安装 mb.YTPlayer。 如下所示插入其关键字并将其激活到您的 WordPress 帐户。

安装后请转到您的 WordPress 仪表板。 之后,将鼠标光标悬停在左侧边栏的“mb.ideas”选项上。 单击您在其下拉菜单中看到的 YTPlayer 按钮。

进入YT.Player扩展的编辑界面。 首先,单击切换按钮以激活背景视频。 之后,在屏幕截图中显示的文本框中插入 YouTube 视频的 URL。

向下滚动页面,您会看到一个部分,用于选择要在其中集成视频的页面。 我们选择了静态主页进行演示。 完成编辑后,您可以单击保存更改。

保存更改后,您可以在此页面上看到所选视频的缩略图。 您还可以添加多个以逗号分隔的视频 URL。 您的观众每次访问您的网站时都可以随机看到这些视频中的任何一个。

- 具有动画、视频背景和介绍制作器的滑块英雄
Slider Hero 插件可帮助您为您的网站创建响应式滑块。 您可以在滑块上添加文本轮播、号召性用语 (CTA) 按钮和其他几个元素。 此外,它还允许您添加视频作为背景部分。
像任何其他免费扩展一样,您可以从 WordPress 的添加新插件页面安装它。 在搜索栏中输入其关键字“Slider Hero”。 选择以Quantum Cloud作为发布者名称的第一个选项。

现在您必须转到仪表板并在侧栏中搜索 Slider Hero 选项。 请将鼠标光标悬停在其上方以显示下拉菜单。 单击菜单中的“新建滑块”按钮。

您现在处于此插件的编辑界面。 它提供了七种不同的滑块效果供您选择。 单击要编辑的滑块选项。 我们选择了第一个选项:No Effect。

下一页包括两个部分。 第一个允许您添加滑块,而下一个允许您自定义其效果。
我们建议您单击左侧顶部的加号 (+)。 它会创建一个草稿幻灯片,您可以在其中编写标题和说明。 此外,您可以为每个按钮添加两个 CTA 按钮。

转到右侧部分,您需要选择菜单栏的视频设置选项。 它显示了一个下拉菜单,其中包含三个视频背景选项。 选择 YouTube 视频背景选项。

您只能在其高级插件版本中使用其他两个选项。
Slider Hero 通过此操作显示各种视频滑块设置。 您会看到一个包含 YouTube 视频 ID 的文本框。 要获取此代码,您可以将视频的整个 URL 粘贴到此空间中。

请在完成调整后单击“保存”按钮。 保存更改后,单击菜单栏右上角的简码选项。 Slider Hero 提供了一个短代码,您可以将其粘贴到您网站的任何页面中。

复制上面突出显示的代码并将其粘贴到记事本中。 现在您可以在 WordPress 侧边栏中查找 Pages 选项。 将鼠标指针悬停在其顶部以显示下拉菜单。

之后,您必须单击 Add New 以创建新页面。 当您进入新页面时,您必须将短代码粘贴到正文区域。 完成编辑后单击“保存草稿”按钮。

您还可以单击“预览”按钮来检查视频的工作情况。 完成添加其他页面元素后,单击“发布”按钮。
下面的屏幕截图说明了背景视频的外观。

3. 使用 WordPress 主题创建视频背景部分
集成视频背景的一种简单方法是安装支持此功能的 WordPress 主题。 借助多媒体支持主题,您无需外部扩展即可将视频部分添加到您的站点。
以下是三个具有支持视频背景的强大主题的网站。
- WordPress.org – 免费主题存储库
WordPress.org 包含各种免费主题和插件来为您的网站提供动力。 它以最少的设置工作。 此外,这个开源工具让您可以方便地分享您的故事、产品和服务。
您可以从其搜索栏中搜索相关主题。 输入术语“视频背景”并从其结果中选择任何一项。 此外,您可以下载任何模板并将其安装在您的 WordPress 仪表板上。
请在下载前阅读其说明,以确保它支持您要添加的功能。 您必须将主题的 ZIP 文件上传到您的 WordPress 帐户并在之后激活它。
- 主题森林 – 高级 WordPress 主题
主题森林包括数以千计的 WordPress、电子商务、营销、CMS 等主题和模板。它们是全球最大的主题市场,为不同的项目提供独特的项目。
如果您想要一个高级网页模板,那么我们推荐这个网站。 与 WordPress.org 类似,您需要输入关键字来搜索相关主题。 它允许您根据价格、最佳匹配等对结果进行排序。
在您的 WordPress 仪表板上安装后,您必须阅读其文档以添加视频背景。 如果它不包含相关说明,那么您需要联系他们的支持团队。
- Rara 主题 – 免费和高级 WordPress 主题
Rara Themes 收集了一些最好的网站模板。 他们的主题非常适合创建不同领域的网站,包括旅游、商业、教育、时尚、个人博客等。 它的每个网站模板都允许您将视频集成到标题背景中。
为此,您可以同时使用其免费和高级主题。 我们将解释如何使用其产品之一设置视频背景部分。 在本次演示中,我们选择了 Chic Lite。
请安装并激活此主题并转到 WordPress 仪表板。 将鼠标指针悬停在边栏中的外观选项上。 然后,单击下拉菜单中的标题按钮。

通过此操作,您可以输入横幅部分的首页自定义设置。 您可以在左侧边栏中看到添加标题视频的标题。 单击选择视频按钮,如下所示。

您到达媒体库页面,您可以在其中选择要显示的视频。 选择您计划上传的视频,然后单击选择视频按钮。 它允许您更改文件标题、标题和描述。

如果您尚未上传视频,则需要转到上传文件部分。 您可以在库中添加视频并选择在标题区域显示它。
返回自定义设置,您可以看到您选择的视频的缩略图。 此外,如果您想集成 YouTube 视频,您可以在下面突出显示的空间中输入其 URL。

视频自动播放,没有音频。 您的观众可以选择在浏览网站时暂停和播放视频。
在哪里可以找到您的视频背景部分的库存照片?
到目前为止,您必须清楚地了解如何为您的网站添加视频背景。 但是,您有现成的视频要插入吗? 如果没有,请允许我们为您提供便利。
如果您是一名视频制作者或为您的项目聘请了一名视频制作者,则不必担心。 但是,如果您想要一个通用的视频剪辑来增强您网站的美感,您可以使用素材库。
素材库是免版税内容,您可以在没有版权问题的情况下使用。 让我们看一下提供优质和免费股票视频的四个网站的列表。
1. 存在Shutterstock
Shutterstock 可让您下载各种多媒体元素,如图像、图形、音乐、镜头等。Google、BuzzFeed、Marvel 和其他几个知名品牌依靠他们的库存库来激发他们的创造力。
您可以根据主题对视频进行分类,例如动物/野生动物、假期、科学、教育、自然等。 Shutterstock 拥有超过一百万个 4K、高清和标清质量的库存视频。
2. Envato 元素
Envato Elements 拥有超过 5000 万种数字资产,例如图形模板、视频、音频、照片、字体等。他们获得了自然、商业和背景的各种 b-roll 素材和视频剪辑。
3. 像素
Pexels 是一个免费的图片和视频库。 您可以搜索任何素材类别,例如房屋、咖啡馆、自然、儿童、家庭等。 如果您想支持他们,它还允许您向创作者捐款。
4.Pixabay
Pixabay拥有一个由才华横溢的创作者组成的社区,拥有超过 180 万张库存照片和视频。 您可以使用、修改和分发它们的元素,而无需给予信任。 与 Pexels 类似,您可以根据需要捐赠一位或多位创作者。
常见问题 (FAQ)
Slider Hero 插件是否支持 YouTube 视频的自动播放功能?
Slider Hero 仅在没有音频的情况下才支持您的 YouTube 视频的自动播放功能。 如果您的视频有声音,那么它可能/可能不会自动播放,具体取决于各种因素。
哪个视频背景插件最适合我的网站?
高级 WordPress 背景插件将在您的网站上运行得最好。 它允许您使用易于使用的块元素集成视频,并支持自托管和 YouTube 视频。
我什么时候不应该在我的网站上使用视频背景?
在某些情况下,视频背景可能不是重要的组成部分。 例如,如果您希望访问者阅读特定文本,那么视频可能会分散注意力。
我应该上传自托管视频还是嵌入 YouTube 视频?
在做出此决定时,您需要考虑您网站的加载速度。 如果您使用自托管视频,则可能会降低您的网站速度。 因此,我们推荐使用 YouTube 视频背景。
我可以从嵌入的 YouTube 视频中删除分享和订阅按钮吗?
不可以。YouTube 不允许您从嵌入的视频中删除“分享和订阅”按钮。 此功能仅在 2018 年 9 月之前可用。
包起来!
您可以使用此博客的提示和技术创建一个很棒的视频作为背景。 您是否知道更多用于将此功能添加到您的网站的插件/扩展程序? 请在下面的评论部分分享您的答案。
另外,您是否发现我们的博客内容丰富? 随时提供您的诚实反馈,以便我们改进未来的内容。