如何创建一个 HTML 页面来更新同一网页上的多个 YouTube 视频链接？ [关闭]答案

【问题标题】：How to create one HTML page that can update multiple YouTube video links on the same web-page? [closed]如何创建一个 HTML 页面来更新同一网页上的多个 YouTube 视频链接？ [关闭]
【发布时间】：2017-10-19 00:44:56
【问题描述】：

我希望在同一页面上有多个更新的 YouTube 链接（一次一个视频）。例如，在下面的 HTML 代码中，有一个指向第一页和第二页的链接。第一页中的 YouTube 视频与第二页中的不同。这意味着我需要为每个视频创建一个 HTML 文件。如何创建一个 HTML 页面来更新同一网页上的多个 YouTube 视频链接，而无需为每个 YouTube 视频创建一个 HTML 文件？

<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        </head>
        <body>

    <a href="test.html">First Video</a>
    <a href="test.html">Second Video</a>

        <!-- This is the first video -->
        <iframe width="560" height="315"
                src="https://www.youtube.com/embed/621IukZrGJo?list=PLLcHY_4gyFEHRwJ8OuXjR3SjBazaEgoTq"
                frameborder="0" allowfullscreen>
        </iframe>

    <!-- This is the second video -->

    <iframe width="560" height="315"
                src="https://www.youtube.com/embed/H_sYWYq9Aks?list=PLLcHY_4gyFEHRwJ8OuXjR3SjBazaEgoTq"
                frameborder="0"
                allowfullscreen>
        </iframe> 
</body>
</html>

【问题讨论】：

您可能需要在您的后端/应用程序中实现 YouTube API - developers.google.com/youtube/v3/docs/videos/list

标签： javascript html css youtube

【解决方案1】：

将 Youtube 频道链接到网站

有关将您的 youtube 频道链接到您的网站的信息，请参阅this 帮助文章。您基本上必须通过 Google Search Console 验证所有权，完成后您将能够通过结束卡和频道页面链接到您的网站。

在您的网站上显示您频道上的所有视频

有几种方法。第一个在this SO answer中进行了解释，并将嵌入您所有的视频上传。

在发布新视频时自动更新您网站的播放列表

这是自动的！加载页面时，如步骤 2 中所示的嵌入将始终拉取最新版本的播放列表。

【讨论】：

请注意，该解决方案仅适用于具有旧用户名的频道。如果您没有，它将无法正常工作。所以将取决于频道的年龄。如果它足够老并且有一个旧名称，那么这将是最好的（简单）选项。否则每次页面加载时都需要使用 api 并在他的频道上执行 GET。
所以，如果我决定换一种方式（使用 api（什么 api？）并在每次页面加载时在他的频道上执行 GET），那么这是否意味着我只需要实现 HTML 代码？请解释一下。
developers.google.com/youtube/v3/docs/playlists/list@MohammadMahjoub
有没有视频可以演示这个过程。这个链接看起来很有帮助，但是，我仍然不知道如何使用这个文档来构建我想要构建的东西。该 api 向我展示了每种方法的作用，但是，它没有告诉我如何创建一个 HTML 页面，该页面具有多个链接到同一页面的 YouTube 链接。我该怎么办？@Judge2020

【解决方案2】：

您必须使用 YouTube 开发者 API。你可以使用JavaScript

https://developers.google.com/youtube/v3/code_samples/javascript

【讨论】：