在 iframe 中加载 Youtube Player API

Loading the Youtube Player API inside an iframe

本文关键字：Player API Youtube 加载 iframe      更新时间：2023-09-26

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

对

不起，伙计。问题的解决方案"易于"编码/实现，但痛苦且难以维护。

Youtube API 不允许嵌入 YT。Iframe 中的播放器对象（例如 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

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

最后在小部件上.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播放器，您可以从父窗口使用它。

我希望它有用！ ;)

相关文章：