html - Youtube Video Still Playing in background When Bootstrap Modal Closes

Question

I am playing embed YouTube video inside bootstrap modal, when i close modal video still playing in background. Please help me

 <!-- Button trigger modal -->
    <button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#vid1" id="pbtn">
       <i class="fas fa-play" style="color: #ebaf02;font-size: 24px;"></i>
      </button>

<!-- Modal -->
  <div class="modal fade"  id="vid1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          
            <iframe id="video101" src="https://www.youtube.com/embed/il_t1WVLNxk"  width="760" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
           
        </div>
      </div>
    </div>
  </div>

<script>
 var myModal101 = document.getElementById('vid1')
 var myInput101 = document.getElementById('video101')
 
 myModal101.addEventListener('hide.bs.modal', function () {
   myInput101.get(0).stopVideo();
 })
</script>

question from:https://stackoverflow.com/questions/65932932/youtube-video-still-playing-in-background-when-bootstrap-modal-closes

Answer 1

This will work for you.

$('#vid1').on('hide.bs.modal', function(){
    $('#video101').attr('src', $('#video101').attr('src'));
  });

Working Fiddle