Bootstrap视频模态框关闭后重新打开无法显示问题求助

核心问题 #

你的JS代码中获取iframe元素时选择器错误：

var url = $("BetterConnect").attr("src");

这里的BetterConnect是元素ID，但jQuery的ID选择器必须加前缀#，正确写法应为$("#BetterConnect")。因为缺少#，代码无法正确读取iframe的src值，url变量实际为undefined。当模态框关闭后你把src设为空，重新打开时给iframe设置的是无效的undefined，自然无法加载视频。

修复后的JS代码 #

$(document).ready(function () {
    // 修复ID选择器，添加#前缀
    var url = $("#BetterConnect").attr("src");
    $("#BetterConnectModal").on("hide.bs.modal", function () {
      $("#BetterConnect").attr("src", "");
    });
    $("#BetterConnectModal").on("show.bs.modal", function () {
      $("#BetterConnect").attr("src", url);
    });
});

额外注意事项 #

• 现代浏览器对autoplay参数有严格限制，通常需要用户手动交互才能触发自动播放。如果打开模态框后视频没自动播放，可以尝试移除src中的?autoplay=1，或者添加mute=1参数（如https://www.youtube.com/embed/skFzBaX41NM?autoplay=1&mute=1）来绕过限制。
• 确保jQuery和Bootstrap JS文件已正确引入，且加载顺序正确（先加载jQuery，再加载Bootstrap JS）。

内容的提问来源于stack exchange，提问作者Schneider G