Youtube API 动态 iFrame

Question

我正在尝试动态加载 youtube 视频（页面加载后点击生成 iframe），并能够使用 Youtube API 控制播放。

我发现如果加载 API 时页面上不存在 iFrame，我似乎无法让控件工作。我究竟做错了什么？ （我想避免在页面加载时包含 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 sandbox 属性，以便外部脚本可以访问 iframe

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