javascript - 停用模态后如何停止YouTube视频？

Question

关闭模式窗口后，i框架元素继续播放，我不知道如何在JS中引用适当的元素。

诀窍是，我使用PHP变量作为ID来直接从数据库中生成和使用多个模式窗口。

代码如下:

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

你可以试试:

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

});