YouTube-API onPlayerReady wird nie aufgerufen

Question

Folgen Sie this tutorial, ich habe versucht, die YouTube-API in meine Website zu integrieren. Insbesondere wenn eine Taste gedrückt wird, möchte ich ein Video auf YouTube im Vollbildmodus wiedergeben. Leider kann ich nicht einmal den in diesem Tutorial angegebenen Code verwenden.

I Slim bin mit für Markup so habe ich eine leere div mit der ID-Player als das Tutorial

schlägt

.body 
    .player 

ich dann diesen Javascript am Ende meiner Markup hinzugefügt

$(document).ready(
    function() { 
     loadYoutubeAPI(); 
    }); 

, die die Kette der Aufruf dieser Funktionen

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

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

function onPlayerReady(event) { 
    event.target.playVideo(); 
} 

var done = false; 
function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
} 

function stopVideo() { 
    player.stopVideo(); 
} 

jedoch die Kette der Anrufe Anschläge beginnen soll bevor onPlayerReady ausgelöst wird und ich nicht herausfinden kann warum.

Answer 1

Von was ich sehen kann, scheint es, als ob Ihr Problem in der Spieler div scheint der Klassenspieler zu sein und von was ich in der Anleitung sehen kann, ist die Suche nach einem div mit Spieler-ID. so etwas wie die folgenden funktionieren kann:

.body 
    #player 

Ich bin nicht 100% vertraut mit Slim so können Sie dies bis anders markieren müssen.