如何使用WordPress自适应YouTube播放列表视频播放器插件

本文详述如何使用WordPress插件创建自适应的YouTube播放列表视频播放器,涵盖安装API密钥、配置选项及实现水平布局。该插件支持播放列表、频道和单个视频,提供定制界面和无限视频分页。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这篇文章中,我将回顾WordPress响应式YouTube播放列表视频播放器插件,该插件可让您集成能够无缝播放YouTube播放列表的视频播放器。

处理大量视频流内容的网站应以对最终用户有吸引力且直观的方式来组织其内容。 它也应该是他们广告策略的一部分。 具体来说,如果您正在寻找一种更好的方式来展示自己的利基YouTube内容,那么您来对地方了!

今天,我们将探讨CodeCanyon提供的最受欢迎的插件之一: WordPress响应式YouTube播放列表视频播放器 。 它允许您以不同的方式嵌入YouTube内容,无论是作为播放列表,频道还是单个视频。 此外,它还具有自定义设计的界面,而不是YouTube的默认界面。

让我们快速浏览WordPress自适应YouTube播放列表视频播放器带来的重要功能:

  • 支持YouTube播放列表,频道播放列表或单个视频
  • 通过智能调整大小进行响应
  • 界面定制
  • 最新的YouTube v3数据API
  • 基于AJAX的分页,视频数量不受限制
  • 水平和垂直布局
  • 还有很多

此插件提供了许多有用的功能,可让您轻松嵌入YouTube内容。

我们的议程

您可以使用多种方式使用此插件并自定义输出。 在这篇文章中,我们将通过按ID嵌入YouTube播放列表来构建成熟的水平YouTube播放器。

我们过程的结果将如下所示:

完成的YouTube视频播放器

在整个教程中,我们将探索该插件的不同方面,同时逐步接近建立YouTube播放列表视频播放器的目标。 在下一节中,我将向您展示如何下载和安装此插件。

安装并注册自己的YouTube API密钥

在本部分中,您将了解从CodeCanyon购买并下载WordPress响应式YouTube播放列表视频播放器插件后,如何安装和配置它。 在本文中,我使用了WordPress 5.2.3,插件版本为1.11.0。 我建议您安装插件,如果您想跟随这篇文章。

播放器使用YouTube的Data API V3,并且要使用该API,您需要一个API密钥。 如果您未注册自己的私有API密钥,则将使用默认密钥。 但是,默认密钥由许多其他未输入自己密钥的用户使用,并且API每个密钥只能发出有限数量的请求。 因此,拥有自己的密钥以确保在拥有高流量网站的情况下不会出现中断始终是一个好主意。

如果您不知道如何注册YouTube API密钥,则该插件会提供一份不错的指南,其中有详细说明。 当您访问管理端的主插件页面时,系统会显示一条消息,提示您输入自己的API密钥。 单击注册键按钮以打开指南。 请按照指南中的说明操作,并获取您的钥匙。

注册关键信息

获取API密钥后,只需在插件的GENERAL SETTINGS部分中输入它,如以下屏幕截图所示。

常规设置-注册码

在下一部分中,我们将介绍该插件提供的不同配置部分。

插件配置选项

在本部分中,我们将快速介绍WordPress响应式YouTube播放列表视频播放器插件提供的不同配置选项。

安装此插件后,您可以通过单击左侧栏中的YouTube链接来访问它。

常规设置

在本部分中,您可以配置与分页,自动播放和GDPR相关的常规设置。 而且,正如我们前面所讨论的,您可以在此部分中注册YouTube API密钥。

出现

顾名思义,您将在本节中找到与播放器的视觉方面相关的设置。 几个重要的设置包括播放列表布局,播放器宽度,高清显示以及一些与文本相关的设置。

控制项

要自定义播放器时,重要的是应该能够在不同的播放器控件之间进行选择。 本部分允许您根据需要隐藏或显示不同的播放器控件。

色彩

本部分允许您配置几乎每个播放器控件的颜色。

因此,简要介绍了此插件提供的配置选项。 在下一节中,我们将通过ID嵌入YouTube播放列表,以构建成熟的水平YouTube播放器。

创建具有水平播放列表布局的YouTube播放器

可以使用编辑器中的短代码按钮将YouTube播放列表添加到您的帖子或页面上,如以下屏幕截图所示:

嵌入按钮

当您单击该按钮时,它将打开以下屏幕快照中所示的弹出窗口。

嵌入按钮弹出窗口

如您所见,您可以通过多种方式将YouTube内容添加到您的网站。 就我们而言,要嵌入YouTube播放列表,我们将使用第一个选项: YouTube播放列表 。 要嵌入YouTube播放列表,您需要一个播放列表URL,您可以从YouTube频道页面轻松获取该列表。 当然,如果您尚未创建任何播放列表,则必须先创建一个。 无论如何,您都应该以https://www.youtube.com/playlist?list={YOUR_PLAYLIST_ID}之类的播放列表网址结尾。

获取播放列表URL后,将其插入YouTube播放列表字段,如以下屏幕截图所示,然后单击INSERT按钮。

插入播放列表网址

您的简码将生成并添加到您的页面或帖子中。 就我而言,我创建了一个新页面。 短代码应如下所示:

[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j"]

继续并发布页面,以查看页面的外观。

无需定制的演示

这就是外观的默认视图。 主视频在左侧,播放列表中的其他视频在右侧栏中。 您可以单击任何视频进行播放。 这是此插件术语中的垂直播放列表类型。

在我们的情况下,我们希望水平显示播放列表中的其他视频。 您可以通过在嵌入代码中提供playlist_type参数来控制此布局。 实际上,此插件通过短代码提供了许多自定义选项,使您可以控制YouTube播放器的不同方面。 不可能讨论所有选项,但我们将突出显示用例所必需的选项。

首先,让我们添加playlist_type参数,如以下代码片段所示。

[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal”]

接下来,我们要确保播放器能够响应-这是通过使用width_type参数来完成的。

[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal” width_type=”responsive”]

接下来,我们要确保视频质量为高清并且YouTube徽标已隐藏。

[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal” width_type=”responsive” force_hd hide_youtube_logo]

到目前为止,我们所做的设置特定于自定义播放器控件。 以某种方式,我觉得我们还需要更改一些控件的颜色,以使它们看起来更直观。 因此,让我们在YouTube> COLORS上更改几个颜色设置。

此插件可让您更改不同控件的颜色。 就我而言,我尝试更改颜色,如以下屏幕截图所示。 当然,您可以自己尝试寻找适合您网站的颜色主题。

颜色变化

到目前为止,我们已经进行了所有更改,播放器应如下所示:

定制玩家演示

如您所见,播放器的各个方面都有自定义选项。 在本文中,我们嵌入了YouTube播放列表,但您也可以嵌入频道或单个视频。 我会把它留给您作为练习! 当然,如果您有任何疑问,可以随时使用下面的供稿ping我。

其他可能的用途

在本文中,我们讨论了如何将YouTube播放列表的播放器添加到WordPress网站。 正如我们之前所讨论的,WordPress响应式YouTube播放列表视频播放器插件还能够播放各种类型的YouTube内容。 您还可以使用它来集成:

  • YouTube频道
  • YouTube用户
  • YouTube单个视频
  • YouTube以逗号分隔的ID播放多个视频

下一步:其他WordPress媒体脚本

如果您正在寻找可以立即使用的其他WordPress媒体脚本,我建议您检查以下可用的低成本脚本。

结论

今天,我借此机会介绍了CodeCanyon提供的WordPress自适应YouTube播放列表视频播放器插件。 这是一个商业媒体播放器插件,可让您轻松嵌入各种类型的YouTube内容。 此外,它还允许您根据需要自定义播放器的外观。

希望您喜欢这篇文章,并随时使用下面的提要发表您的想法!

翻译自: https://code.tutsplus.com/tutorials/how-to-use-the-wordpress-responsive-youtube-playlist-video-player-plugin--cms-34043

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值