如何在更換視頻時停止視頻（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', '');