如何使用侧边栏嵌入youtube播放列表

Question

我正在尝试将带有侧边栏的youtube播放列表嵌入我的html页面。

播放列表本身可以通过以下html代码嵌入：

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLMC9KNkIncKtPzgY-5rmhvj7fax8fdxoj" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"/>

这将显示播放列表，但没有侧边栏。因此，我现在要在youtube播放列表显示旁边添加侧边栏。

所以最终的视图应该是这样的：

侧栏项目应为下一个视频的缩略图。您应该能够滚动/导航到播放列表中未显示的下一个/上一个视频。当您单击侧栏项目时，显示的视频应更新为单击的视频，而侧栏应更新为下一个可用的视频。

在youtube播放列表上，边栏显示如下：

因此，我们希望仅通过图像缩略图更改侧边栏。因此youtube侧栏的外观更加“干净”。

注意：解决方案应仅使用html / css / javascript。

这两个问题是相同的：

嵌入YouTube播放列表插件，并显示侧边栏列表

将YouTube播放列表嵌入侧面列表托盘

但是这些都是从很久以前开始的，iframe和插件解决方案似乎都不再起作用。

谢谢你的帮助！

编辑： 基于答案的运行示例

Answer 1

TL; DR：您必须使用官方的Google Youtube API

不幸的是，不可能像在iframe嵌入式Youtube上那样使用相同的“简单”方法。为了能够自定义播放列表的外观，您需要执行一些准备步骤：

1. 创建一个Google开发者帐户以接收所需的API。
2. 建立专案
3. 在凭据页面上的“ OAuth同意 ”选项卡上，填写必填字段，然后将您的站点域添加到“ 授权域”部分（出于测试目的，添加https://cdpn.io，但不要忘记将其替换为您的实际站点域之后）
4. 再次转到凭据页面-创建一个API密钥，将其限制为仅使用Youtube Data API（在列表的最底部）
5. 再次转到凭据页面-创建一个OAuth ClientId。出于测试目的，将https://cdpn.io域添加到Authorized JavaScript origins中，但不要忘记稍后将其替换为您的实际站点域
6. 为YouTube 启用API服务

然后，在完成此列表中的所有操作之后，请参见codepen示例如何进行协调。一些要求：

• 填写API键变量
• 建立在Google API上的实施将需要用户确认才能访问服务。这取决于您何时初始化此确认弹出窗口。

更新内容：

确实，您是对的，可以在不使用auth的情况下调用这些方法。

这是列表的升级版本