如何使用侧边栏嵌入 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。

这两个问题问的一样，但这些都是很久以前的事了，iframe 和插件解决方案似乎都不再起作用了。：

• Embed YouTube Playlist plugin with sidebar list visible

• Embed youtube playlist with side list tray

编辑：

答案中的示例似乎已过时，here a functional version。 （当然是@Skyrocker 的全部学分）

Answer 1

您可以YouTube Data API 嵌入带有侧边栏的 YouTube 播放列表，但为此您必须做很多事情。您必须创建一个 Google Developer 帐户才能访问该 API。然后您可以创建您的项目并创建 API 并根据您的需要进行修改。完成所有更改后，启用 YouTube 的 API 服务即可开始使用。

Answer 2

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

---

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

1. 创建一个 google 开发者帐户以接收所需的 API。
2. 创建project
3. 在credentials page - 在标签OAuth 同意屏幕 上填写必填字段并将您的站点域添加到授权域 部分（出于测试目的添加一个https://cdpn.io，但不要忘记稍后将其替换为您的实际站点域）
4. 再次转到凭据页面 - 创建 API 密钥，将其限制为仅使用 Youtube 数据 API（位于列表的最底部）
5. 再次转到凭据页面 - 创建 OAuth ClientId。出于测试目的，将 https://cdpn.io 域添加到 Authorized JavaScript origins，但不要忘记稍后将其替换为您的实际站点域
6. Enable the API Services 用于 Youtube

然后，在完成此列表中的所有操作后，请参阅codepen example 如何编排此内容。几个要求：

• 填写 API 密钥变量
• 基于 Google API 构建的实施需要用户确认才能访问服务。这由您来考虑流程何时 来初始化此确认弹出窗口。

更新：

确实，你是对的，这些方法可以在没有身份验证的情况下调用。

Here是你的升级版列表

Answer 3

实现主页和侧边栏的div，就像你在页面的任何地方嵌入视频一样，添加到侧边栏的div中，没问题。