Stopping a youtube video when Modal is closed

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

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.