встроенный IFrame элемент не работает с YouTube IFrame API

Question

Вот jsfiddle для этого проекта: http://jsfiddle.net/frankzfaz/bweH4/13/

Элементы IFRAME элементы я хочу использовать загружаются в HTML с помощью JavaScript, когда кнопка нажата:

document.getElementById('iframeload').innerHTML = '<iframe id="ytplayer" type="text/html" width="300" height="300" src="https://www.youtube.com/embed/' + metalMusicVid[indexVid].youTubeId + '?enablejsapi=1&modestbranding=1&rel=0&iv_load_policy=3&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>'; 

Как вы можете видеть, «metalMusicVid [indexVid] .youTubeId» вытягивает идентификаторы видео youtube из массива js. Вот как я хочу, чтобы он работал.

Я хочу, чтобы это работало с слушателями событий youtube api. Как видно здесь:

 var tag = document.createElement('script'); 
    tag.src = "https://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // youtube player api stuff 
    function onYouTubePlayerReady(playerId) { 
    var player = document.getElementById("ytplayer"); 
    player.addEventListener("onStateChange", "onytplayerStateChange"); 
    player.addEventListener("onError", "onPlayerError"); 

        // get current time and display it. 
         setInterval(function(){document.getElementById('vidTime').innerHTML = "Current: " + pad(Math.floor(player.getCurrentTime()/60)) + ":" + pad(Math.floor(player.getCurrentTime() % 60))}, 1000); 
         // pads number with extra zeros, looking more like a real digital clock 
          function pad(val) { 
           var valString = val + ""; 
           if (valString.length < 2) { 
            return "0" + valString; 
           } else { 
            return valString; 
           } 
          } 
    } 


function onytplayerStateChange(newState) { 
    //console.log("New state " + newState); 
if(newState === 0){alert('the youtube api is working')} 
if(newState === -1){alert('the youtube api is working')} 
} 

function onPlayerError(errorCode) { 
    console.log("New ERROR " + errorCode); 
} 

Это работает с объектом встраивается, но я хочу использовать плавающие фреймы, так что лучше работает с IPADS и мобильными устройствами. И нет, я не хочу загружать iframes из самого api, как видно из документации Google, потому что каждый идентификатор видео загружается из массива javscript.

Все, что мне нужно, это прослушиватели событий, чтобы забрать новый iframe из его идентификатора элемента.

URL: http://jsfiddle.net/frankzfaz/bweH4/13/

Answer 1

При использовании IFrame API. вам не нужно, чтобы конструктор YT.Player генерировал API ... если вместо этого вы передаете в качестве аргумента либо идентификатор существующего iframe, либо ссылку на существующий элемент DOM (и в любом случае пропустите ' videoId '), тогда объект игрока будет инициализирован вашим существующим iframe и установите все ваши привязки. Таким образом, вместо этого:

function onYouTubePlayerReady(playerId) { 
    var player = document.getElementById("ytplayer"); 
    player.addEventListener("onStateChange", "onytplayerStateChange"); 
    player.addEventListener("onError", "onPlayerError"); 
    // ... etc etc etc 

Вы бы хотели что-то вроде этого:

function onYouTubeIframeAPIReady() { // called automatically when the iframe API loads. 
    var player = new YT.Player(playerId, { // passing the reference to the DOM element of your existing iframe 
    events: { 
     'onStateChange': onPlayerStateChange, 
     'onError': onPlayerError 
    } 
    }); 
}