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"));

}）;

Answer 2

好吧。

最后我自己做了：

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]);
    });
}

停用模式后如何停止YouTube视频？

2 个答案: