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

已发表: 2023-06-10

您是否正在寻找一种在 WordPress 中将 YouTube 视频添加为全屏背景的方法?

如果使用得当,背景视频可以立即吸引访问者的注意力并将其留在您的网站上。 这使它们成为登陆页面和销售页面的绝佳选择。

在本文中,我们将向您展示如何在您的 WordPress 网站上添加 YouTube 视频作为全屏背景。

How to add YouTube video as fullscreen background in WordPress

为什么使用 YouTube 视频作为全屏背景?

当访问者首次登陆您的 WordPress 网站时,您只有几秒钟的时间来吸引他们的注意力并让他们留下来。

引人入胜且引人注目的视频背景是让访问者留在您网站上的好方法。 此外,还有许多支持视频背景的不同 WordPress 主题。

但是,在 WordPress 上上传和托管视频会占用大量带宽。 根据您的 WordPress 托管计划,您甚至可能需要购买额外的存储空间。

一种解决方案是添加 YouTube 视频作为全屏背景。 通过这种方式,您可以在不降低网站速度或占用额外存储空间的情况下从竞争对手中脱颖而出。

也就是说,让我们看看如何在您的 WordPress 网站上添加 YouTube 视频作为全屏背景。

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

将 YouTube 视频添加为全屏背景的最简单方法是使用 Advanced WordPress Backgrounds。 此插件添加了一个新的背景块,允许您使用任何颜色、图像或视频(包括 YouTube 视频)创建全屏背景。

An example of a YouTube video background in WordPress

首先,您需要安装并激活插件。 如果您需要帮助,请参阅我们关于如何安装 WordPress 插件的指南。

激活后,只需转到要将 YouTube 视频添加为全屏背景的页面或张贴。 然后您可以继续并单击“+”按钮。

在出现的弹出窗口中,开始输入“Background AWB”。 当出现正确的块时,单击它以将其添加到页面。

How to add a fullscreen video to a WordPress blog post or page

在左侧菜单中,您将看到三个选项卡,分别对应您可以创建的不同类型的全屏背景:颜色、图像和视频。

由于您要添加 YouTube 视频,请单击“视频”选项卡。

此插件可让您使用自托管视频作为背景。 但是,视频会占用大量存储空间和带宽,因此您永远不应该将视频上传到 WordPress。

话虽如此,选择“YouTube/视频”选项卡。

How to add a YouTube video as a fullscreen background in WordPress

现在,您将需要要在 WordPress 博客上使用的 YouTube 视频的 URL。

在新选项卡中,只需转到视频并复制地址栏中的链接即可。

Getting the URL for a YouTube video

完成后,切换回您的 WordPress 仪表板并将 URL 粘贴到“视频 URL”选项卡中。

现在,WordPress 块编辑器将显示此背景的外观预览。 Advanced WordPress Backgrounds 会根据您在其上添加的内容更改视频的大小,因此如果视频当前看起来有点小,请不要担心。

How to customize a YouTube background video in WordPress

在开始添加内容之前,配置背景设置是个好主意。

默认情况下,视频背景在移动设备上处于禁用状态。 与台式电脑相比,智能手机和平板电脑通常具有更小的屏幕和更低的处理能力。 考虑到这一点,最好在移动设备上禁用视频背景。

但是,如果您确实想在移动设备上显示视频背景,请单击以激活“在移动设备上启用”开关。

Showing a YouTube background on mobile devices

开箱即用,该块将循环播放整个 YouTube 视频。

另一种选择是通过在“开始时间”和“结束时间”框中键入确切时间来播放视频的特定部分。

How to add a YouTube background video to a website

您还可以通过禁用“循环”切换来停止循环播放视频。

默认情况下,视频只会在访问者可以在浏览器中看到时播放。 这有助于提高您的 WordPress 速度和性能,因此您通常希望禁用“始终播放”切换。

当您第一次添加视频时,它以 100% 的不透明度显示,因此看起来很稳固。

根据您网站的设计,您可能希望通过拖动“图像不透明度”滑块来试验半透明视频背景。 这可能是一种创建更微妙的 YouTube 视频背景的方法。

Changing the opacity settings for a YouTube video

如果您尝试不透明度,那么您可能还想尝试添加彩色叠加层。

只需单击以展开“覆盖颜色”部分,然后使用设置来创建不同颜色的覆盖。

Adding an overlay to a video background

Advanced WordPress Backgrounds 插件支持几种不同的视差效果。 这是一种现代网页设计技术,其中背景元素的滚动速度比前景内容慢,这通常会增加页面设计的深度。

要尝试不同的视差效果,请单击以展开“视差”部分,然后从下拉菜单中选择一个选项。

Adding parallax effects to a WordPress website

选择视差样式后,您将可以访问一些可以更改速度的额外设置。 您还可以在移动设备上启用和禁用视差效果。

同样,您可以尝试不同的鼠标视差效果,当访问者移动鼠标时,这些效果会导致背景滚动得更慢。

要查看这些设置,请单击以展开“鼠标视差”部分。

Adding mouse parallax effects to a background video

当您对 YouTube 视频背景的设置感到满意时,就可以开始添加文本、链接和图像等内容了。

首先,单击背景 (AWB) 块中间的“+”图标。

Adding blocks to a YouTube background video

这将打开一个弹出窗口,您可以在其中选择要添加的块。 Advanced WordPress Backgrounds 插件适用于所有标准 WordPress 块,因此您可以添加任何您想要的内容。

配置第一个块后,只需再次单击“+”按钮,然后添加您要使用的下一个块。

Adding a RafflePress giveaway block to a video background

只需不断重复此过程即可创建帖子或页面布局。

当您对它的外观感到满意时,单击“更新”或“发布”按钮使页面生效。 现在,如果您访问您的 WordPress 网站,您将看到正在运行的视频背景。

An example of a YouTube video background in WordPress

奖励:如何在 WordPress 中添加 YouTube 视频源

视频背景可以吸引访问者的注意力,同时还可以宣传您的 YouTube 频道。 但是,如果您真的想在 YouTube 上吸引更多访问者和订阅者,那么您可能需要向您的网站添加更多视频。

这就是 Smash Balloon 的用武之地。

Smash Balloon YouTube Feed Pro 是市场上最好的 YouTube 图库插件。 它会自动显示来自您的 YouTube 频道的所有最新视频,因此访问者总是能看到最新的内容。

Embedding a YouTube playlist using Smash Balloon

只需使用 Smash Balloon 的简易编辑器创建 YouTube 提要,然后使用短代码或插件的现成块将其添加到任何页面或帖子。

您还可以使用 Smash Balloon 将 YouTube 播放列表、收藏夹和直播流嵌入您的 WordPress 网站。

Creating a YouTube feed using the Smash Balloon social media plugin

Smash Balloon 最好的一点是它不会减慢您的网站速度。 该插件的内置 YouTube 缓存功能将确保您的网站始终快速加载,这对 SEO 非常有用。

我们希望本文能帮助您了解如何在 WordPress 中添加 YouTube 视频作为背景。 您可能还想查看我们的指南,了解如何使用 WordPress 创建登录页面,以及我们专家挑选的最佳 YouTube 视频库插件。

如果您喜欢这篇文章,请订阅我们的 YouTube 频道以获取 WordPress 视频教程。 您还可以在 Twitter 和 Facebook 上找到我们。