Embedded Youtube video keeps playing after dismissed

Question

Any suggestions on how to stop a youtube video from continuously playing in the background after pressing the dismiss button or even off the modal view?

<a data-toggle="modal" href="#videoModal">
    <img class="img-responsive img-rounded" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">
</a>

<div class="modal fade" id="videoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Learn how to make this app!</h4>
            </div>
            <div class="modal-body">
                <iframe width="500" height="281" src="http://youtu.be/GWPc6EDwv8k" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

possible duplicate of [this](http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe) — Cerlin, Dec 30 '14 at 08:52

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

With some jQuery you could do something like this:

$('#someButton').click(function(){
   $('#playerID').get(0).stopVideo();
)};

Here's a post related to your question, hopefully it can point you in the right direction: Youtube api - stop video

edited May 23 '17 at 10:33

Community

1
1

answered Dec 30 '14 at 08:54

Alex J

1,029
6
8

what method is "stop video" I looked it up in the mdn and the jquery api nothing was shown search results. Any way you can elaborate a tad more? – EliCollins Dec 30 '14 at 09:01
Just updated my answer with a related stackoverflow link, hopefully it helps – Alex J Dec 30 '14 at 09:03

EliCollins · Answer 2 · 2014-12-30T22:04:25.220

So I found this online threw massive amounts of research and this worked for me. I created a separate js file then linked that to the page.

    /*Function built to take on search for youtube video in modal*/
function ytplayer() {
    $('#videoModal iframe').attr("src", $("#videoModal iframe").attr(
        "src"));
}  
/*Function shuts down video when dismiss button is toggled*/
$('.close').click(function() {
    $('#videoModal').hide();
    ytplayer();
});

/*Function shuts down video when modal background is toggled*/
$('#videoModal').on('hidden.bs.modal', function() {
    ytplayer();
});

Embedded Youtube video keeps playing after dismissed

2 Answers2