如何嵌入带有侧边栏的 youtube 播放列表
How to embed a youtube playlist with a sidebar
我正在尝试将带有侧边栏的 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 播放列表显示旁边添加一个侧边栏。
所以最终的视图应该是这样的：
边栏项目应该是下一个视频的缩略图。您应该可以 scroll/navigate 播放列表中未显示的 next/previous 视频。当您单击侧边栏项目时，显示的视频应更新为单击的视频，侧边栏应更新为下一个可用视频。
在 youtube 播放列表侧边栏显示如下：
因此我们希望仅使用图像缩略图来更改侧边栏。所以 'cleaner' youtube 侧边栏的外观。
注意：解决方案应该只使用html/css/javascript。
这 2 个问题问的是同一个问题，但这些都是很久以前的事了，iframe 和插件解决方案似乎都不再有效了。:
Embed youtube playlist with side list tray
编辑：
答案中的示例似乎已过时，here a functional version。 （当然，全部归功于@Skyrocker）
TL;DR: 你必须使用官方 Google Youtube API
遗憾的是，无法使用与 iframe 嵌入式 Youtube 相同的 "easy" 方法。为了能够自定义播放列表的外观，您需要执行一些准备步骤：
- 创建一个 google 开发者帐户以接收需要的 API。
- 创建 project
- 在 credentials page 选项卡上 OAuth 同意屏幕 填写必填字段并将您的站点域添加到 授权域 部分（出于测试目的添加 https://cdpn.io，但不要忘记稍后将其替换为您的实际站点域）
- 再次转到凭据页面 - 创建一个 API 密钥，将其限制为仅使用 Youtube 数据 API（在列表的最底部）
- 再次转到凭据页面 - 创建一个 OAuth ClientId。出于测试目的，将 https://cdpn.io 域添加到 Authorized JavaScript origins，但不要忘记稍后用您的实际站点域替换它
- Enable the API Services 用于 Youtube
然后，完成此列表中的所有操作后，查看 codepen example 如何编排此操作。一些要求：
- 填充API键变量
- 基于 Google API 的实现将需要用户确认才能访问服务。这个就看你怎么想流程when来初始化这个确认pop了。
更新:
确实，你是对的，这些方法可以在没有授权的情况下调用。
Here是你的升级版列表
实现主页和侧边栏的 divs，将视频嵌入页面任何位置的方式，将其添加到侧边栏 div，没问题。
您可以 YouTube Data API 嵌入带有边栏的 YouTube 播放列表，但为此您必须做很多事情。您必须创建一个 Google 开发者帐户才能访问该 API。然后你可以创建你的项目并创建 API 并根据你的需要修改它。在您完成所有更改后，为 YouTube 启用 API 服务，您就可以开始了。
我正在尝试将带有侧边栏的 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 播放列表显示旁边添加一个侧边栏。
所以最终的视图应该是这样的：
边栏项目应该是下一个视频的缩略图。您应该可以 scroll/navigate 播放列表中未显示的 next/previous 视频。当您单击侧边栏项目时，显示的视频应更新为单击的视频，侧边栏应更新为下一个可用视频。
在 youtube 播放列表侧边栏显示如下：
因此我们希望仅使用图像缩略图来更改侧边栏。所以 'cleaner' youtube 侧边栏的外观。
注意：解决方案应该只使用html/css/javascript。
这 2 个问题问的是同一个问题，但这些都是很久以前的事了，iframe 和插件解决方案似乎都不再有效了。:
Embed youtube playlist with side list tray
编辑：
答案中的示例似乎已过时，here a functional version。 （当然，全部归功于@Skyrocker）
TL;DR: 你必须使用官方 Google Youtube API
遗憾的是，无法使用与 iframe 嵌入式 Youtube 相同的 "easy" 方法。为了能够自定义播放列表的外观，您需要执行一些准备步骤：
- 创建一个 google 开发者帐户以接收需要的 API。
- 创建 project
- 在 credentials page 选项卡上 OAuth 同意屏幕 填写必填字段并将您的站点域添加到 授权域 部分（出于测试目的添加 https://cdpn.io，但不要忘记稍后将其替换为您的实际站点域）
- 再次转到凭据页面 - 创建一个 API 密钥，将其限制为仅使用 Youtube 数据 API（在列表的最底部）
- 再次转到凭据页面 - 创建一个 OAuth ClientId。出于测试目的，将 https://cdpn.io 域添加到 Authorized JavaScript origins，但不要忘记稍后用您的实际站点域替换它
- Enable the API Services 用于 Youtube
然后，完成此列表中的所有操作后，查看 codepen example 如何编排此操作。一些要求：
- 填充API键变量
- 基于 Google API 的实现将需要用户确认才能访问服务。这个就看你怎么想流程when来初始化这个确认pop了。
更新:
确实，你是对的，这些方法可以在没有授权的情况下调用。
Here是你的升级版列表
实现主页和侧边栏的 divs，将视频嵌入页面任何位置的方式，将其添加到侧边栏 div，没问题。
您可以 YouTube Data API 嵌入带有边栏的 YouTube 播放列表，但为此您必须做很多事情。您必须创建一个 Google 开发者帐户才能访问该 API。然后你可以创建你的项目并创建 API 并根据你的需要修改它。在您完成所有更改后，为 YouTube 启用 API 服务，您就可以开始了。