Javascript YouTube弹出空模式

我试图用嵌入的YouTube视频编码一个弹出模式，但我的模式是空的。我使用的是Bootstrap，有两个单独的部分和javascript。 当模态出现时，它是空白的。我把它编错了吗

这是我的密码

$（函数（）{
//自动播放模式视频
$（“.video”）。单击（函数（）{
var theModal=$（this）.data（“目标”），
videoSRC=$（this.attr（“数据视频”），
videoSRCauto=videoSRC+“？虚拟品牌=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1”；
$（模态+iframe'）.attr（'src'，videoSRCauto）；
$（模式+'按钮.close'）。单击（函数（）{
$（模态+iframe'）.attr（'src'，videoSRC）；
});
});
});

查看Team Viewer的工作原理
&时代；
我通过更改javascript文件的顺序解决了这个问题，我将模式代码移到了.js的顶部。也许不是做事情的最佳方式，但它奏效了

$(function() {
  // Auto play modal video
  $(".video").click(function () {
    var theModal = $(this).data("target"),
    videoSRC = $(this).attr("data-video"),
    videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' iframe').attr('src', videoSRC);
    });
  });
});

$('.slider').slick({
  infinite: true,
  slideToShow:1,
  slideToScroll:1,
  autoplay: true,
  autoplaySpeed: 4000
});

var mymap = L.map('mapid').setView([36.367, -5.23], 11);
L.marker([36.367, -5.23]).addTo(mymap)
        .bindPopup("<center>We are happy to serve:</center> <b>Estepona, San Luis de Sabinillas, Manilva, Guadiaro, Soto Grande</b> and all surrounding areas").openPopup();

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGF1bHNlYWwiLCJhIjoiY2prbXlpZjN5Mjl1YzNzcWh1MGpkYjd0YyJ9.q6m5a0rQF5cfEtn6Lb6H4Q', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap);

$("form").submit(function(e) {

  var error = "";
  if ($("#email").val() == "") {
    error += "The email field is required.<br>";
  }
  if ($("#subject").val() == "") {
    error += "The Subject field is required.<br>";
  }
  if ($("#message").val() == "") {
    error += "The message field is required.<br>";
  }
  if (error != "") {
    $("#error").html('<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>');
    return false;
  } else {
    return true;
  }
});

$（函数（）{
//自动播放模式视频
$（“.video”）。单击（函数（）{
var theModal=$（this）.data（“目标”），
videoSRC=$（this.attr（“数据视频”），
videoSRCauto=videoSRC+“？虚拟品牌=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1”；
$（模态+iframe'）.attr（'src'，videoSRCauto）；
$（模式+'按钮.close'）。单击（函数（）{
$（模态+iframe'）.attr（'src'，videoSRC）；
});
});
});
$（'.slider'）。光滑({
无限：是的，
幻灯片：1，
幻灯片滚动：1，
自动播放：对，
自动播放速度：4000
});
var mymap=L.map（'mapid'）.setView（[36.367，-5.23]，11）；
L.标记（[36.367，-5.23]）。添加到（mymap）
.bindPopup（“我们很高兴为您服务：埃斯特波纳、圣路易斯·德·萨比尼利亚斯、马尼尔瓦、瓜迪亚罗、索托·格兰德和所有周边地区”）.openPopup（）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？访问令牌=pk.eyj1ijoicgf1bhnlywwilchijoi2prbxlpzjn5mjl1yznzch1mgpkyjd0yyj9.q6m5a0rqf5cftn6lb6h4q'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（mymap）；
$（“表格”）。提交（功能（e）{
var误差=”；
如果（$（“#电子邮件”）.val（）=“”）{
错误+=“电子邮件字段是必需的。
”；
}
if（$（“#主题”）.val（）=“”）{
错误+=“主题字段是必需的。
”；
}
如果（$（“#消息”）.val（）=“”）{
错误+=“消息字段是必需的。
”；
}
如果（错误！=“”）{
$（“#error”）.html（“您的表单中出现错误：
”+error+”）；
返回false；
}否则{
返回true；
}
});
我刚刚复制了您的代码并将其放在小提琴中，它似乎可以正常工作。。。控制台中是否出现错误？一切正常。
是的，很奇怪。如果我从script.js文件中删除其他javascript，它会工作得很好，但是当其他代码在它之前时，它就不工作了？好吧，我只是继续，尝试弄清楚您的依赖项是什么，并将它们放在这个文件中。导致此错误的唯一原因是，如果向下滚动到模式触发器所在的底部，则没有包含“mapid”的容器。这仍然有效。我添加到html中的所有内容都是
，地图内容看起来很奇怪，你必须通过单击窗口滚动条向下滚动到底部。但关键是嵌入视频的模式仍然可以与前面添加的javascript一起工作