如何在模态窗口中停止youtube视频？

Question

我在html中有这段代码：

<div class="modal-pop modal-pop1">
    <div class="modal_bg"></div>
    <div class="modal_container wrap">
        <div class="wrap_modal_container">
            <img src="img/modal_button_exit.png" alt="" class="modal_button">
            <div class="vid">
                <iframe width="100%" height="437" src="//www.youtube.com/embed/c_LxX0Sbq2k?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

整个块设置为display: none 然后我使用jQuery来显示它

$('.listen-example').click(function(){ 
    $('.modal-pop1').fadeIn()
})

和此代码关闭模态窗口

$('.modal_bg, .modal_button').click(function() {
        $('.modal-pop').fadeOut();
});

它工作正常，但在关闭模态窗口后，youtube视频仍然继续播放，我该如何解决？

Answer 1

给iframe 唯一身份说'myid'并尝试以下代码： -

$('.listen-example').click(function(){ 
    $('.modal-pop1').fadeIn();
    $("#myid").attr('src','//www.youtube.com/embed/c_LxX0Sbq2k?rel=0');
});

$('.modal_bg, .modal_button').click(function() {
    $('.modal-pop').fadeOut();
    $("#myid").attr('src','');
});