Youtube iFrame embed stopVideo не является функцией

Question

Я пытаюсь встроить iframe youtube в пользовательский блок света, который у меня есть на моем сайте. Сама встроенная программа отлично работает. Лайтбокс закрывается, когда я пытаюсь закрыть его, но видео (аудио довольно) продолжает играть в фоновом режиме. stopVideo функция возвращает «stopVideo не является функцией»

$("#youTubeLink").click(function(){ 
    var f = '<iframe id="ytplayer" type="text/html" width="100%" height="400px" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>' 
    global.addLightboxContent(f); 
    global.showLightbox(); 
}); 

Когда я закрываю осветителя это то, что происходит

$("div#lightbox-close").click(function() { 
    $('#ytplayer').stopVideo(); 
    global.killLightbox(); 
} 

• глобальные функции лайтбоксов делают то, что они должны (добавить IFRAME в LB, показать это, а затем убейте его)
• , когда нажата кнопка div#lightbox-close, функция запускается. Протестировано с помощью консольного журнала

Я предполагаю, что у меня отсутствует какой-то сценарий jout Youtube. Я не уверен, что именно.

Answer 1

// https://developers.google.com/youtube/iframe_api_reference 

// global variable for the player 
var player; 

// this function gets called when API is ready to use 
function onYouTubePlayerAPIReady() { 
    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 

    // bind events 
    var playButton = document.getElementById("play-button"); 
    playButton.addEventListener("click", function() { 
    player.playVideo(); 
    }); 

    var pauseButton = document.getElementById("pause-button"); 
    pauseButton.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 

} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

пожалуйста, проверьте этот пример http://codepen.io/marti1125/pen/XdyPOe

Answer 2

справа, так что вам действительно нужно, чтобы загрузить IFrame вставлять, используя javascript API предоставленный YouTube. Однако это может не сработать с вашим лайтбокс, поскольку для его содержимого требуется строка html.

В качестве альтернативы, вы всегда можете удалить ваш youtube iframe на близком расстоянии - это определенно остановит видео/аудио. Я подозреваю, что вы устанавливаете свой контент лайтбокса на пустую строку ("") или даже пустой div или iframe должны делать трюк ...

Надеюсь, это поможет!