Question

我有一个内部有几个内部（即没有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文件的几个负载的额外成本。

Answer 1

我很抱歉。解决问题的方法是“易于”编码/实施，但很难维护。

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

因此，一个快速的修补程序是保存API文件的副本并修改它们以添加此功能。显然，从那一刻开始，您负责提供这些文件并更新它们，以免文件被弃用。

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

使用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上：

在此，您必须修改以下两项功能：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播放器，你可以在父窗口中使用它。

我希望它有用！ ;）