Question

내 사이트에있는 맞춤 라이트 박스에 YouTube iframe을 삽입하려고합니다. 퍼가기 자체가 잘 작동합니다. 라이트 박스는 닫으려고 할 때 닫히지 만 비디오 (오히려 오디오)는 백그라운드에서 계속 재생됩니다. 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(); 
} 

• 글로벌 라이트 박스 기능들이 (LB에 iframe을 추가해야하는 일을하는 일이 무엇인가 "stopVideo는 함수가 아닙니다", 쇼 그것을 죽인 다음)
• div#lightbox-close을 클릭하면 해당 기능이 실행됩니다. 콘솔 로그로 테스트했습니다.

나는 Youtube js 스크립트가 포함되어 있다고 생각합니다. 나는 정확히 무엇인지 모르겠습니다.

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

에게 오른쪽을 확인, 그래서 당신은 참으로 YouTube에서 제공하는 javascript API를 사용하여 iframe이 삽입을로드해야하겠습니다. 그러나 라이트 박스에서는 내용에 HTML 문자열이 필요하기 때문에 제대로 작동하지 않을 수 있습니다.

또는 항상 youtube iframe을 닫아도됩니다. 동영상/오디오가 확실히 중단됩니다. 라이트 박스 내용을 빈 문자열 ("")로 설정하거나 심지어 비어있는 div 또는 iframe을 트릭해야한다고 생각합니다 ...

희망이 있습니다.