阻止加载上一个视频iframe的模态视频iframe

Question

我有一个网站有两个模态视频iframe，可以独立加载。但是当我点击第一个并关闭然后点击第二个iframe似乎加载第一个而不是一次点击。

以下是模态代码

<!-- Modal-1 -->
        <div id="modal-1" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <p class="title">Los Angeles Men's Central Jail inmates live in squalid conditions</p>
                <p class="author">By David Ono</p>
                <p class="date">Monday, March 23, 2015</p>
              </div>
              <div class="modal-body">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-item" width="100%" src="https://abc7.com/video/embed/?pid=567290" frameborder="0" allowfullscreen></iframe>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal-2 -->
        <div id="modal-2" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <p class="title">Inside the largest jail system in the country</p>
                <p class="author">By Lisa Ling</p>
                <p class="date">Tuesday, September 13, 2016</p>
              </div>
              <div class="modal-body">                    
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-item" width="100%" src="//fave.api.cnn.io/v1/fav/?video=tv/2016/09/15/lisa-ling-la-country-jail-orig-al.cnn&customer=cnn&edition=domestic&env=prod" frameborder="0" allowfullscreen></iframe>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

这是关闭时停止视频的JavaScript

$('#modal-1, #modal-2').on('hidden.bs.modal', function () {
    $('iframe').attr('src', $('iframe').attr('src'));
});

Answer 1

看起来我找到了解决方案。显然我之前的代码是将两个iframe重置为第一个。以下是我找到的修复方法。

$('#modal-1, #modal-2').on('hidden.bs.modal', function () {
    $('iframe').each(function (){
        var src = $(this).attr('src');
        $(this).attr('src', src);
    });
});