在 iframe 中访问 YouTube 或 Vimeo API答案

【问题标题】：Access YouTube or Vimeo API in iframe在 iframe 中访问 YouTube 或 Vimeo API
【发布时间】：2017-05-24 22:42:06
【问题描述】：

如何从 iframe 的 javascript 访问 youtube 或 vimeo api 提供的对象？ window.parent 不起作用或我做错了什么。

【问题讨论】：

标签： api iframe youtube-api vimeo-api youtube-iframe-api

【解决方案1】：

我只使用了 YouTube“iframe API”，所以我无法评论 Vimeo 流程。

下面的 sn-p 大部分是从 api 文档中逐字提取的，除了 promise 部分。加载 API 时，它将调用 onYouTubeIframeAPIReady 函数，该函数可以做任何需要的事情，在这种情况下，解析一个承诺，因此我们确定所有内容都已加载。

var tag = document.createElement('script'),
    firstScriptTag = document.getElementsByTagName('script')[0];

tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function apiLoaded() {
  var apiPromise = new Promise((resolve) => {
    window.onYouTubeIframeAPIReady = function() {
      resolve();
    };
  });

  return apiPromise; 
}

确保在尝试执行 API 调用时始终使用 apiLoaded() 返回的承诺，例如：

apiLoaded().then(function() {
  var player = new window.YT.Player('iVideoFrame', {
    events: {
      ...
    }
  });
});

这假设您在 HTML 中的某处定义了 iframe（请注意视频 URL 中的查询参数）：

<iframe id="iVideoFrame" type="text/html" width="..." height="..." frameborder="0" src="http://www.youtube.com/embed/videoId?enablejsapi=1&amp;controls=1&amp;showinfo=1"></iframe>

【讨论】：