防止模态视频 iframe 加载以前的视频 iframe

Posted 2023-05-09

【中文标题】防止模态视频 iframe 加载以前的视频 iframe

【英文标题】：Prevent modal video iframe from loading previous video iframe

【发布时间】：2018-06-02 02:56:47

【问题描述】：

我的网站有两个模态视频 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"  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"  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'));
);

【参考方案1】：

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

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