Youtube API Dynamic iFrame

Question

我正在尝试动态加载youtube视频(iframe是在页面加载后点击生成的)，可以使用youtube API控制播放。

我发现的是，如果iFrame在加载API时不存在于页面上，我似乎无法让控件工作。我做错了什么?(我想避免一个解决方案，包括有iframe出现在页面上，当它被加载)

下面是一些示例代码:https://jsfiddle.net/nu1y9oe8/5/(单击黑框生成iframe并播放视频。一旦视频开始播放，试着按下暂停键)

我如何将API绑定到iframe一旦它已经创建了点击，以便暂停按钮工作?

'use strict';
var player;
// Call the youtube api
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Is the api ready
function onYouTubeIframeAPIReady() {
  console.log('api is ready');
}
(function() {
  var youtube = document.querySelectorAll( ".youtube" );
  for (var i = 0; i < youtube.length; i++) {
    youtube[i].addEventListener( "click", function() {
      var iframe = document.createElement( "iframe" );
      iframe.setAttribute( "id", "test-api" );
      iframe.setAttribute( "frameborder", "0" );
      iframe.setAttribute( "allowfullscreen", "" );
      iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1&enbalejsapi=1" );
      this.innerHTML = "";
      this.appendChild( iframe );
      player = new YT.Player('test-api');
      console.log(player);
    } );
  }
  var pause = document.querySelector('.pause');
  pause.addEventListener('click', function() {
    player.pauseVideo();
  });
})();    

任何帮助都将非常感激。谢谢!

Answer 1

enbalejsapi=1的小错字应该是enablejsapi=1

添加iframe沙箱属性，以便外部脚本可以访问iframe

iframe.setAttribute( "sandbox", "allow-same-origin allow-scripts" );