Youtube API Dynamic iFrame

Question

Я пытаюсь загрузить видео в формате youtube динамически (iframe генерируется при щелчке после загрузки страницы) с возможностью управления воспроизведением с использованием API Youtube.

Я обнаружил, что если 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 sandbox атрибутов, так что внешний скрипт может получить доступ к IFRAME

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