How can I stop a video when it is replaced (Jquery)?

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: ` Watch and listen our reviews

        <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>

The program works fine but when the video is replaced, the other one won't stop playing and you hear it. I guess i can't use the replaceWith() method...any suggestions? Thanks