如何在模态弹出窗口中清除iFrame标签的多个YouTube URL

Question

我有一个模态弹出，我在其中显示YouTube视频。我面临的问题是视频正在播放，即使我关闭了模态弹出窗口。我已经在模态隐藏上清除了URL。但这仅清除一个URL。休息URL无法清除。请帮助。

$(document).ready(function() {
      /* Get iframe src attribute value i.e. YouTube video url
      and store it in a variable */
      var url = $("#cartoonVideo").attr('src');
      /* Assign empty url value to the iframe src attribute when
      modal hide, which stop the video playing */
      $("#myModal").on('hide.bs.modal', function() {
            $("#cartoonVideo").attr('src', '');
      });
      /* Assign the initially stored url back to the iframe src
      attribute when modal is displayed again */
      $("#myModal").on('show.bs.modal', function() {
           $("#cartoonVideo").attr('src', url);
      });
  });

Answer 1

@sachin，您需要将 common Class 设置为模态，假设您已经创建了多种模态并添加了同一类。

我认为您在DEMO HTML下工作。

    Like Eg.
    <!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">   
  </div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog">   
  </div>
</div>
<!-- Modal -->
<div id="myModal3" class="modal fade" role="dialog">
  <div class="modal-dialog">   
  </div>
</div>

您需要设置一个公共类

，还设置 *iframe标签，common类。

    <!-- Modal -->
<div id="myModal1" class="modal fade jsyoutube" role="dialog">
  <div class="modal-dialog">   
    <iframe src="URL" class="jsframe"></iframe>
  </div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade jsyoutube"  role="dialog">
  <div class="modal-dialog">   
<iframe src="URL" class="jsframe"></iframe>
  </div>
</div>
<!-- Modal -->
<div id="myModal3" class="modal fade jsyoutube" role="dialog">
  <div class="modal-dialog">   
<iframe src="URL" class="jsframe"></iframe>
  </div>
</div>

JavaScript脚本

    $(document).ready(function() {     
      $(".jsyoutube").on('hide.bs.modal', function() {
            $(".jsframe").attr('src', '');
      });
  });

Answer 2

  <div class="modal-body">
<!--<p>One fine body…</p>-->
      <iframe id="siparis_goruntule" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>    

和链接

<a href="#myModal" role="button" class="btn" data-toggle="modal" onclick="JavaScript:siparis_goruntule.src='http://siparis.company.com/id=<?=$siparis_id?>';" >Sipariş Görüntüle</a>