Stopping a youtube video when Modal is closed

Question

I'm trying to use Bootstrap's Modal to play a youtube video on the website that I'm working on but I have one problem. I read tips from here: Bootstrap 3 and youtube in Modal

and the only one that seemed to work well for me was this:

Jeremy Kenedy Fiddle

But the problem is, when I click outside the modal to close it while the video is playing, the video doesn't stop, so I can still hear it in the background. I tried searching for answers: google, youtube, stackoverflow, but nothing worked.

I kept reading to use the hidden.bs.modal. I've searched and searched and played with it but it still plays on the background. Here is my code:

HTML:

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">VIDEO</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
 <div class="modal-content">
<div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <div>
                <iframe width="100%" height="350" src=""></iframe>
            </div>
        </div>
    </div>
</div>

JS file:

  autoPlayYouTubeModal();
    //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
     function autoPlayYouTubeModal() {
       var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
      var theModal = $(this).data("target"),
          videoSRC = $(this).attr("data-theVideo"),
          videoSRCauto = videoSRC + "?autoplay=1";
      $(theModal + ' iframe').attr('src', videoSRCauto);
      $(theModal + ' button.close').click(function () {
          $(theModal + ' iframe').attr('src', videoSRC);
      });
    $("#videoModal").on('hidden.bs.modal', function (e) {
    $("#videoModal iframe").attr("src", $("#videoModal iframe").attr("src"));
});
  });}

I added the hidden.bs.modal code that I found in one of the answers on that page, but it doesn't seem to be working. Would you mind helping me out?

Thank you so much and I'll appreciate every help that I get!

Tina

Tugzrida · Accepted Answer · 2015-06-10T20:54:58.620

Check out this fiddle.

I've used the YouTube IFrame API which allows the video to be easily started and stopped with just a few lines of code. The fiddle currently starts the video after the modal is opened and stops it as soon as the modal is closed.

var player;

function loadVideo() {
    player = new YT.Player('player', {
        width: '100%',
        videoId: 'loFtozxZG0s',
    });
}

$('#myModal').on('hide.bs.modal', function (e) {
    player.stopVideo();
});

$('#myModal').on('shown.bs.modal', function (e) {
    player.playVideo();
});

The loadVideo function creates a new YouTube player in the #player div. This is where the video is set, videoId.

The next function stops the video on hide.bs.modal which fires as soon as the modal starts to close.

The last function starts the video on shown.bs.modal which fires after the modal has been shown.

You can find out more about the YouTube IFrame API here.

Hope this works,

Tugzrida.

Hi @Tina if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — Tugzrida, Jul 23 '15 at 09:03

score 0 · Answer 2 · answered Oct 12 '16 at 12:47

This works for me:

<script>
    //function to get and autoplay youtube video from datatag:
   function autoPlayYouTubeModal(){
        var trigger = $("body").find('[data-toggle="modal"]');
        trigger.click(function() {
            var theModal = $(this).data( "target" ),
                    videoSRC = $(this).attr( "data-theVideo" ),
                    videoSRCauto = videoSRC+"?rel=0&amp;autoplay=1" ;
            $(theModal+' iframe').attr('src', videoSRCauto);
            $(theModal+' button.close').click(function () {
                $(theModal+' iframe').attr('src', videoSRC);
            });
            $(theModal).on('hide.bs.modal', function (e) {
    $(theModal+' iframe').attr('src', videoSRC);
});
        });
    }
    //the function call:
            $(document).ready(function(){
                autoPlayYouTubeModal();
            });
            </script>

I added:

$(theModal).on('hide.bs.modal', function (e) {
    $(theModal+' iframe').attr('src', videoSRC);
});

Stopping a youtube video when Modal is closed

2 Answers2