Как остановить видео на YouTube после того, как модал уволен?

Question

После закрытия модального окна элемент i frame продолжает играть, и я понятия не имею, как ссылаться на нужный элемент в JS.

Хитрость в том, что я использую переменную PHP в качестве идентификатора для генерации ииспользовать несколько модальных окон прямо из моей базы данных.

Код выглядит следующим образом:

foreach ($movieId as $data) {
  echo '<div class="card card-movie-poster bg-blacker text-white text-center  text-align-middle mx-2 mb-3">
    <div class="card-body">
    <a data-toggle="modal" href="#myModal'.$data['movieID'].'"><img class="card-img " src="img/movieCovers/'.$data['datatitle'].'.jpg"></a>
    </div>
  </div>';}

И

foreach ($movieId as $datatitle) {
 echo '<div class="modal fade" id="myModal'.$data['movieID'].'">
 <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content bg-black">
  <div class="modal-header">

  <!-- Movie Title -->
  <h3 class="text-white-50">'.$data['movieTitle'].'</h3>

    <!-- Close button -->
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="modal-body container">

    <!-- Video -->
  <div class="embed-responsive embed-responsive-16by9">
    <iframe id="'.$data['movieID'].'" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/'.$data['videoUrl'].'?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
  </div>
  </div>
</div>

';}

Answer 1

Хорошо, тогда.

Наконец-то сделал сам:

var grabbed = document.querySelectorAll('[id^="myModal"]');
var myModal;
var innerIframe;
for (var i = 0; i < grabbed.length; i++) {
    // console.log(grabbed[i].id);
    $(grabbed[i]).on('show.bs.modal', function () {
        myModal = this.id;
        // console.log(this.id);
    })
    $(grabbed[i]).on('hide.bs.modal', function () {
        // console.log(this.id + " closed");
        innerIframe = this.getElementsByClassName('embed-responsive-item');
        $('iframe').attr('src', $('iframe').attr('src'));
        // console.log(innerIframe[0]);
    });
}

Answer 2

Вы можете попробовать:

$("#myModal").on('hidden.bs.modal', function (e) {
$("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));

});