根据 API 的结果嵌入 YouTube 视频答案

【问题标题】：Embed YouTube video based on results from API根据 API 的结果嵌入 YouTube 视频
【发布时间】：2016-07-23 04:08:00
【问题描述】：

我正在尝试使用 YouTube API 将 YouTube 视频嵌入网页。到目前为止，我已经能够使用 API 根据搜索条件“dog”收集结果。我将如何将这些结果转化为嵌入式视频。现在我得到的结果在 index.html 页面上显示为 JSON 文件。此外，这仅在我的 HTML 和 JavaScript 文件托管在服务器上时才有效，有没有办法在本地执行此操作？

非常感谢您的帮助，并提前感谢您。

HTML：

<html>
    <head>
        <script src="javascript.js" type="text/javascript"></script>
        <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
    </head>
    <body>
        <pre id="response"></pre>
    </body>
</html>

JavaScript：

function showResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
    document.getElementById('response').innerHTML += responseString;
}

function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

function onYouTubeApiLoad() {
    gapi.client.setApiKey('API_KEY');

    search();
}

function search() {
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q:"dogs",

    });


    request.execute(onSearchResponse);
}

function onSearchResponse(response) {
    showResponse(response);
}

【问题讨论】：

标签： javascript html api video youtube-api

【解决方案1】：

要显示搜索结果中的视频，您将使用视频 ID 和 iframe html 标记。这是完整的指导video 和有效的sample。您需要提供自己的 API KEY。
设置像nodejs 这样的服务器。由于您将使用 localhost，请将http://localhost:port_number（8080 等）添加到 GDC 上的 HTTP 引用器。如果你的http refferer端口号是8080，那么你的nodejs端口号也应该是8080。
在 URL 中运行项目，它应该类似于 http://localhost:4567/ViralVideos/index.html。希望对您有所帮助:)

【讨论】：