如何使用侧边栏嵌入 YouTube 播放列表 [英] How to embed a youtube playlist with a sidebar

问题描述

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

I'm trying to embed a youtube playlist with a sidebar to my html page.

播放列表本身可以通过这个 html 代码嵌入:

The playlist itself can be embedded by this html code:

<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 播放列表显示旁边添加一个侧边栏.

This displays the playlist, but without a sidebar. So I now want to add a sidebar next to the youtube playlist display.

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

So the final view should be something like this:

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

The sidebar items should be the thumbnail images of the next videos. You should be able to scroll/navigate to the next/previous videos in the playlist that aren't displayed. And when you click on the sidebar items the displayed video should be updated to the clicked video and the sidebar should updated to the next available videos.

YouTube 播放列表侧边栏显示如下:

On youtube playlist sidebars are displayed like this:

因此，我们希望仅使用图像缩略图来更改侧边栏.因此，YouTube 侧边栏的外观更干净".

So we would like an alteration of that sidebar with only the image thumbnails. So a 'cleaner' look of the youtube sidebar.

注意:解决方案应该只使用 html/css/javascript.

Note: The solution should only use html/css/javascript.

这两个问题问了同样的问题，但这些都是很久以前的，iframe 和插件解决方案似乎都不再适用了.:

These 2 questions have asked the same, but these are from to long ago and both the iframe and plugin solution don't seem work anymore.:

• 嵌入边栏列表可见的 YouTube 播放列表插件

将 youtube 播放列表嵌入边栏列表

答案中的示例似乎已经过时，这里是功能版本.(当然全归功于@Skyrocker)

The example in the answer seems to be outdated, here a functional version. (Full credits to @Skyrocker of course)

推荐答案

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

TL;DR: you'll have to use official Google Youtube API

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

Unfortunately it's impossible to use the same "easy" approach, like the one that you use with a iframe embedded Youtube. To be able to customize the look of the playlist you need to do a few preparation steps:

1. 创建一个 Google 开发者帐户以接收所需的 API.
2. 创建一个项目
3. 在凭据页面 - 标签OAuth 同意屏幕 填写必填字段并将您的站点域添加到 Authorized Domains 部分(出于测试目的添加一个 https://cdpn.io，但不要忘记替换稍后与您的实际站点域一起使用)
4. 再次转到凭据页面 - 创建一个 API 密钥，将其限制为仅使用 Youtube Data API(位于列表的最底部)
5. 再次转到凭据页面 - 创建 OAuth ClientId.出于测试目的，将 https://cdpn.io 域添加到 Authorized JavaScript origins，但不要忘记稍后将其替换为您的实际站点域
6. 为 Youtube 启用 API 服务

1. Create a google developer account to receive the needful API.
2. Create a project
3. On the credentials page - on the tab OAuth consent screen fill the required fields and add your site domain into Authorized domains section (For testing purposes add a https://cdpn.io, but don't forget to replace it with your actual site domain later)
4. Go again to the credentials page - create an API key, restrict it to use only the Youtube Data API (at the very bottom of the list)
5. Go again to the credentials page - create an OAuth ClientId. For testing purposes add a https://cdpn.io domain to the Authorized JavaScript origins, but don't forget to replace it with your actual site domain later
6. Enable the API Services for Youtube

然后，在完成此列表中的所有操作后，请参阅 codepen 示例 如何进行编排.一些要求:

Then, after doing all from this list, see the codepen example how to orchestrate this. A few requirements:

• 填充 API 密钥变量
• 基于 Google API 的实现需要用户确认才能访问服务.这取决于您如何考虑何时初始化此确认弹出窗口.

• Fill API keys variables
• The implementation, that built on the Google API, will require the confirmation from user to access the services. This is up to you to think of the flow when to initialize this confirmation pop.

更新:

确实，您说得对，这些方法无需授权即可调用.

Indeed, you were right, those methods can be invoked without auth.

这里是你的升级版列表

这篇关于如何使用侧边栏嵌入 YouTube 播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！