How to stop a Youtube Video Playing on Twitter Bootstrap Model Close

Question

How do stop a multiple Youtube Video's Playing on Twitter Bootstrap Model Close?

This is what I have... When I have just one video it works fine...

var player = document.getElementById('MjXAo2qxMlA'); //save the object or embed youtube video in a variable
$('#ttvideoModalTwo').on('hide', function () {
  player.stopVideo();
})

var player = document.getElementById('zXscUitXHPc'); //save the object or embed youtube video in a variable
$('#ttvideoModalOne').on('hide', function () {
  player.stopVideo();
})

score 4 · Answer 1 · answered Apr 17 '13 at 00:58

I followed the API documentation but just could not get my video to stop when I closed the modal. I couldn't get the above answer to work either, close button wouldn't do anything.

Eventually decided to use the answer here: http://www.kolor-designs.com/personal/stop-youtube-videos-when-dismissing-the-bootstrap-modal/

It clears the src of the iframe. I assume the alert in their code was for testing, I removed it.

score 1 · Answer 2 · edited Sep 28 '12 at 11:52

This is the full code for stopping the video playback

<div class="modal fade" id="video_3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <button class="close" data-dismiss="modal" type="button">×</button>
    <iframe id="ivideo_3" width="560" height="315" src="http://www.youtube.com/embed/9wiDMU-NnKU?wmode=transparent&enablejsapi=1&origin=http://<YOUR_SITE_HERE.com>" frameborder="0" ></iframe>
</div>

<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player_3;
    function onYouTubeIframeAPIReady() {
        player_3 = new YT.Player('ivideo_3');
        $('#video_3').on('hide', function () {
            player_3.stopVideo();
        });
    }
</script>

score 1 · Accepted Answer · answered Mar 18 '12 at 19:51

1

According to the API you can pass the $.stopVideo() function to stop the video from playing, include that inside your modal('hide') method and you should be able to stop the video once the modal is closed, like so:

JS

var player = document.getElementById('objectId'); //save the object or embed youtube video in a variable
$('#myModal').on('hide', function () {
  player.stopVideo();
})

Youtube API Documentation

answered Mar 18 '12 at 19:51

Andres I Perez

75,075
21
157
138

Ilich I'm using the `data-dismiss="modal"` data attribute to close my modals. When I use the code you provided it breaks my modal close buttons and the modal just stays open. Any thoughts on how to fix this? Thanks! – Mark Rummel Apr 28 '12 at 04:57
@MarkRummel can you provide your code on http://jsfiddle.net? I want to take a look at your markup. – Andres I Perez Apr 28 '12 at 12:49
I'm getting the same thing, I have updated my question with relevant code. – Dan Lee Jul 26 '12 at 13:08
@DanLee post a demo over at jsfiddle.net so i can take a look. -Edit - just noticed that the question was changed, did the initial solution even work? I don't understand. The question now says that when its one video it works (which was the original question), but now the question has been changed to 'multiple' videos? These are two different questions and no attention or feedback has been given to the first. – Andres I Perez Jul 26 '12 at 13:39
@AndresIlich Yes, I managed to get it working with your presented solution with one video only. But when it came to having multiple videos in separate modal boxes they don't close. See [jsfiddle example](http://jsfiddle.net/VmYDG/5/) – Dan Lee Jul 26 '12 at 14:19

How to stop a Youtube Video Playing on Twitter Bootstrap Model Close

3 Answers3

Linked