如何在更换视频时停止视频（Jquery）？

Question

jQuery的：

$(function() { 

$('.videos').hide(); 
$(".bat").click(function() { 
    $('.videos').hide(); 
    $('.morcego').slideDown(); 
    $('.default').replaceWith(".morcego"); 
}); 
$('.hit').click(function() { 
    $('.videos').hide(); 
    $('.careca').slideDown(); 
    $('.default').replaceWith(".careca"); 
}); 
$('.metro').click(function() { 
    $('.videos').hide(); 
    $('.metro-last').slideDown(); 
    $('.default').replaceWith(".metro-last"); 
    }); 
}); 

HTML：` 观看和收听我们的评论

 <iframe width="900" height="400" src="https://www.youtube.com/embed/tl39XPeb7UE?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos morcego img-responsive"></iframe> 

     <iframe width="900" height="400" src="https://www.youtube.com/embed/g7uYfhWNvrA?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos careca img-responsive"></iframe> 

     <iframe width="900" height="400" src="https://www.youtube.com/embed/FDIjP6X9f98?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="videos metro-last img-responsive">></iframe> 

    </div> 

    <div class="videos-list-video"> 
     <h3 class="align-center">Popular Videos</h3> 
     <div class=img-list> 

      <img src="img/batman_videos.jpg" class="img-responsive bat"> 
     </div> 
     <div class=img-list> 

      <img src="img/hitman_videos.jpg" class="img-responsive hit"> 
     </div> 
     <div class=img-list> 

      <img src="img/metro_videos.png" class="img-responsive metro"> 
     </div> 


    </div> 

</div> 

程序工作正常，但视频被更换时，另外一个也不会停止播放和你听到了。我想我不能使用replaceWith（）方法...任何建议？由于

Answer 1

添加&enablejsapi=1到iframe src属性

例

<iframe width="900" height="400" 
    src="https://www.youtube.com/embed/tl39XPeb7UE?rel=0&amp;showinfo=0&enablejsapi=1" 
    frameborder="0" allowfullscreen class="videos morcego img-responsive"></iframe> 

，并呼吁

jQuery("iframe")[0].contentWindow.postMessage('{"event":"command", 
"func":"stopVideo","args":""}', '*'); 

停止iframe中的视频，您可以使用"func":"pauseVideo"暂停视频

检查演示

的jsfiddle：Demo

Answer 2

之前隐藏.video，删除iframe中src。

$(this).find('.videos').attr('src', '');