CODEWITHSUNDEEP
jqueryyoutube
Eugene
Eugene

Reputation: 13

How to stop youtube video in modal window?

I have this code in my 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>

this whole block is set to display: none then I use jQuery to show it by 

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

and this code to close the modal window 

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

It works fine, but after closing the modal window, youtube video still continues to play, how can I fix it?

Upvotes: 0

Views: 492

Answers (1)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Give iframe a unique id say 'myid' and try below code :-

$('.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','');
});

Upvotes: 1

Related Questions