Bootstrap 3.3.7单Modal多视频播放失效问题求助

我帮你排查出问题啦！升级到Bootstrap 3.3.7后失效的核心原因是模态框事件名称的变更，再加上几个小细节需要调整，下面是完整修复方案：

问题根源 #

1. Bootstrap 3事件名变更：旧版Bootstrap的模态框显示事件是show，但Bootstrap 3.x里统一改成了命名空间格式的show.bs.modal，原来的代码绑定的show事件根本不会触发，导致iframe的src从未被设置，视频自然无法显示。
2. 重复绑定事件：每次点击按钮都会给模态框绑定一次事件，多次点击后会出现重复执行的问题，可能导致异常。
3. 全局选择iframe：原代码直接用$('iframe')会选中页面上所有iframe，应该限定在目标模态框内部，避免影响其他元素。

修复后的完整代码 #

HTML部分（保留原结构，补充了模态框头部用于显示视频标题）

<!-- 多个视频触发按钮示例 -->
<a href="https://www.youtube.com/embed/7iPoBjiFdho/" class="btn bootpopup" data-toggle="modal" data-target="#popupModal" title="示例视频1">播放视频1</a>
<a href="https://www.youtube.com/embed/dQw4w9WgXcQ/" class="btn bootpopup" data-toggle="modal" data-target="#popupModal" title="示例视频2">播放视频2</a>

<div id="popupModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

JavaScript部分（修复事件绑定及细节优化）

<script type='text/javascript'>
$(document).ready(function() {
  // 给模态框绑定一次显示前的事件，避免重复绑定
  $('#popupModal').on('show.bs.modal', function(e) {
    // 通过事件对象获取触发模态框的按钮元素
    var triggerBtn = $(e.relatedTarget);
    var videoUrl = triggerBtn.attr('href');
    
    // 给当前模态框内的iframe设置视频链接
    $(this).find('iframe').attr("src", videoUrl);
    
    // 处理视频标题显示逻辑
    var videoTitle = triggerBtn.attr('title');
    if (videoTitle) {
      $(this).find('.modal-title').html(videoTitle);
      $(this).find('.modal-header').show();
    } else {
      $(this).find('.modal-title').html('');
      $(this).find('.modal-header').hide();
    }
  });

  // 模态框关闭时清空iframe的src，避免视频在后台继续播放
  $('#popupModal').on('hidden.bs.modal', function() {
    $(this).find('iframe').attr("src", "");
  });

  // 阻止按钮默认跳转行为（因为已经用data-toggle触发模态框）
  $('.bootpopup').click(function(e) {
    e.preventDefault();
  });
});
</script>

关键改进点 #

• 使用Bootstrap 3.x官方规范的模态框事件：show.bs.modal（显示前触发）和hidden.bs.modal（关闭后触发）
• 通过e.relatedTarget直接获取触发按钮，逻辑更简洁，不用手动解析data-target
• 模态框关闭时清空iframe的src，避免视频在后台静默播放
• 限定iframe的选择范围为当前模态框内部，不会干扰页面其他iframe元素
• 只绑定一次模态框事件，彻底解决重复执行的问题

现在点击不同的按钮，模态框就能正常加载对应的视频啦！

内容的提问来源于stack exchange，提问作者Nimra Waseem