1

I am working on bootstrap modal pop up to play a youtube video and should stop it on click of close or close outside.

Below is my code.

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" style="width: 682px;">
      <div class="modal-header" style="border:none;">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
             
      </div>
      <div class="modal-body">
      <iframe width="640" height="390" src="http://www.youtube.com/watch?v=8CdAfYwEGCI" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

I have tried the below scripts from the similar asked questions on StackOverflow, but they don't work.

Scripts:

$('.close').click(function () {
  $('#myModal2').hide();
  $('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});

Similar Stackoverflow Questions referred:

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

Start/stop youtube iframe when modal is shown/hidden through the api and Jquery events

.. and more

Community
  • 1
  • 1
Nitesh
  • 15,425
  • 4
  • 48
  • 60

1 Answers1

1

Bootstrap has an event called hidden.bs.modal

You can attach your function to this event instead of click

$('#myModal2').on('hidden.bs.modal', function(){
$('#myModal2').hide();
$('#myModal2 iframe').attr("src", jQuery("#myModal2 iframe").attr("src"));
});

Also, bootstrap should automatically hide the modal on its close buttons (this should already be built in)

As for stopping the video, it looks like you are setting the iframe src to itself

(not sure if that will stop the video, if it does then you can ignore my comments below, but if not, you may want to set the src to blank)

$('#myModal2 iframe').attr("src", "");

This will for sure stop the video

TrieuNomad
  • 1,651
  • 1
  • 21
  • 24