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" );

Youtube API 动态 iFrame

Youtube API Dynamic iFrame

javascript

youtube-api

youtube-javascript-api

youtube-data-api

youtube-iframe-api