3

我有一个网站，里面有几个内部（即没有 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 文件的额外成本。

4

1 回答 1

3

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

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 播放器，您可以在父窗口中使用它。

我希望它有用！;)

于 2013-10-17T18:03:57.683 回答