在 iframe 中加载 Youtube Player API答案

【问题标题】：Loading the Youtube Player API inside an iframe在 iframe 中加载 Youtube Player API
【发布时间】：2013-10-24 15:05:44
【问题描述】：

我有一个网站，里面有几个内部（即没有 src）iframe，我想在其中包含一个 Youtube 播放器（使用它的 API）。简而言之，我希望玩家在 iframe 中，由父页面管理。

问题是代码初始化 AFAIK 不适用于 iframe。例如：

var player = new YT.Player('video-player1', {});

您可能已经猜到，问题在于您无法定义包含该 ID 的文档。在 jQuery 中，我会使用类似的东西：

$("video-player1", frames["iframe1"].document)

有什么解决方法吗？显然，我能看到的唯一解决方案是在每个 iframe 中加载 YT api 并在任何 iframe 内工作，但这意味着从我的应用程序中重构很多逻辑，除了加载几个 Youtube JS 文件的额外成本。

【问题讨论】：

【解决方案1】：

对不起，伙计。您的问题的解决方案是“容易”编码/实现，但痛苦且难以维护。

Youtube API 不允许在 iframe 中嵌入 YT.Player 对象（例如 iframe 中的 div），因为它在窗口对象中而不是 iframe 文档中查找“播放器”节点。

因此，对此的快速修复是保存 API 文件的副本并修改它们以添加此功能。显然，从那一刻起，您有责任提供这些文件并更新它们，以免这些文件被弃用。

解决方案是（我认为在 Youtube API 之前加载 JQuery 是理所当然的）：

使用https://developers.google.com/youtube/iframe_api_reference#Getting_Started 提供的基本示例我猜你有这个 <iframe id="if"></iframe> 而不是 <div id="player"></div> 并且稍后您将播放器 div 附加到该 iframe 中。

<body>
    <iframe id="if"></iframe>

    <script>
        $('#if').contents().find('body').append($('<div id="player"></div>'));
        // ...

所以，在定义onYoutubeAPIReady() 时，您必须在YT.Player 构造函数中添加1 个参数：

function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', { /* options */ }, $('#if') );

即$('#if')，您要在其中嵌入播放器的 iframe 元素。

iframe_api

在这个文件中你只需要修改它加载的脚本的src：

来自 a.src = 'http://s.ytimg.com/yts/jsbin/www-widgetapi-vflOb0oo1.js

到a.src = './widget.js';（widget.js 是您的 www-widgetapi-vflOb0oo1.js 的副本）。

终于在 widget.js 上：

这里你必须修改这2个函数：function S(a,b)和function Y(a,b)。

首先function Y(a,b) 到function Y(a,b,c) 以获取iframe 参数。然后在它的正文中将S.call(this,a,new nb(b)); 更改为S.call(this,a,new nb(b),c);

第二，function S(a,b) 到 function S(a,b, dom) 和 c = document 到 c= dom === undefined ? document : dom.contents()[0].

现在您的 iframe 中有一个 Youtube 播放器，您可以在父窗口中使用它。

希望有用！ ;)

【讨论】：