How to stop youtube video after closing bootstrap modal box

While using multiple youtube videos in your website. You may face sound issue such as while you played one video in popup & then close that one & play another one in popup but you will hear that previous one video is still playing in background & you hear multiple sounds.

In this article, We going to share with you that code which will handle that issue & you can play multiple videos without any sound issue playing in background. To solve this we used only Jquery & no CDN links used in it.

#First let see the demo. Then will go through the code.

After playing above video you can hear that their is no sound issue in background, while playing multiple videos.

I have manipulate the way of src we added in iframe by using JQuery. Code mentioned below

                    
$(document).ready(function() {
  var $videoSrc;  
  $('.video-btn').click(function() {
      $videoSrc = $(this).data( "src" );
  });
  $('#MakeModal').on('shown.bs.modal', function (e) {
    $("#video").attr('src',$videoSrc + "?autoplay=1&modestbranding=1&showinfo=0" ); 
  })
  $('#MakeModal').on('hide.bs.modal', function (e) {
        $("#video").attr('src',$videoSrc); 
  }) 
});
                    
                  

In above code, It will assign src into iframe by getting the youtube video embed code we defined in then button by using data-src attribute.

In JQuery code defined above, var $videoSrc; is used too store embed code when user click on specific button or text where popup will call & to make it reuse & want to call multiple videos by using only one popup box i have defined class video-btn which is used to get data-src value, where we defined youtube video embed URL.

After getting URL, $("#video").attr('src',$videoSrc + "?autoplay=1&modestbranding=1&showinfo=0" ); this code is used to assign URL into iframe defined inside popup & this code will reassign src when user open multiple videos.

HTML code defined below, where I defined data-src attribute & then access that URL through JQuery & assign that URL into iframe defined inside popup.

                    
<div class="video-btn btn btn-primary mx-5" data-toggle="modal" 
data-target="#MakeModal" data-src="https://www.youtube.com/embed/WfTqguLPWiE">
  Play video 1
</div>
                    
                  

In above code, you can see i have defined data-target which will call modal box & below modal box code explained.

                    
<div class='modal fade' id='MakeModal'  role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header  text-right pull-right float-right'>
          <button type='button' class='btn btn-default' data-dismiss='modal'>Click here to close popup
        </button>
      </div>
      <div class='modal-body popup__overlay'> 
        <iframe width='100%' height='315' src="" id="video" frameborder='0'  allowscriptaccess="always" allow="autoplay" allowfullscreen ></iframe>
      </div>
    </div>
  </div>
</div>
                    
                  

In above code, you can see that in iframe, src is empty & also this modal box is single popup box which use to play multiple videos one-by-one & eliminating sound issue too. In iframe, src is accessed by JQuery by using id="video" & i have defined JQuery above.

You will get all files, when you download the source code. And after than you can edit it according to you

if you face any issues you can contact by asking question with article link.

You can go through Demo as well as Download source code for the same & make changes according to you