자바가 닫힌 (숨김) 경우 YouTube 동영상 재생 중지

Question

기본 오버레이가 있습니다. 특정 링크를 클릭하면 콘텐츠가 페이지 상단에 표시됩니다. 이것은 잘 작동하지만 방금 YouTube 동영상 삽입을 추가했으며 오버레이가 닫히면 사운드가 백그라운드에서 재생됩니다. 그래서 비디오를 멈추거나 일시 정지 할 방법을 찾아야합니다. 나는 여기있다, 코드를 상속하고 있습니다 :

$('#size-guide a').click(function(e){ 
    e.stopPropagation(); e.preventDefault(); 
    $('.sizeguide-popup-container').addClass('reveal'); 
    $('html,body').addClass('noscroll'); 
    $("header.mainHeader").css("position", "absolute").css("z-index", "100"); 
}); 

$(document).on("click", ".sizeguide-popup-close", function() { 
    $(".sizeguide-popup-container").removeClass('reveal'); 
    $('html,body').removeClass('noscroll'); 
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999"); 
}); 

$('.sizeguide-popup-container').on('click', function(e) { 
    if (e.target !== this) 
    return; 
    $('.sizeguide-popup-container').removeClass('reveal'); 
    $('html,body').removeClass('noscroll'); 
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999"); 
}); 

나는 내가 개정 필요하지만 지금까지 시도한 것은 트릭을 수행하지 않은 단지 2 블록 같아요. 동영상은 rte__video-wrapper div로 자동 포장되어 반응 형으로 표시됩니다. 그래서 내가 (다른 스레드를 읽은 후) 다음과 같은 뭔가를 수정 수 있다고 생각 :와

$(document).on("click", ".sizeguide-popup-close", function() { 
    $(".sizeguide-popup-container").removeClass('reveal'); 
    $('html,body').removeClass('noscroll'); 
    $("header.mainHeader").css("position", "fixed").css("z-index", "9999999"); 
    $(".rte__video-wrapper iframe").attr('src',''); 
}); 

본질적으로 오버레이가 큰 빈 공간이 거기에 다시 열 때문에 비디오 링크를 제거합니다. 누구든지 올바른 방향으로 나를 가리 킵니까?

Answer 1

iframe API에 따르면 player.stopVideo()을 사용하여 YouTube 동영상을 중단 할 수 있습니다.

player.stopVideo() : 중지 무효와 현재 영상의 로딩을 취소합니다. 이 기능은 사용자가 플레이어에서 추가 동영상을 보지 않을 것으로 예상되는 드문 상황을 대비하여 예약해야합니다. 의도적으로 동영상을 일시 중지하려는 경우 pauseVideo 함수로 전화해야합니다. 플레이어 이 재생중인 비디오를 변경하려면 stopVideo를 먼저 호출하지 않고 대기열 기능 중 하나를 호출 할 수 있습니다.

추가 코드 참조는 SO post에서 확인할 수 있습니다.