添加多个Iframe视频弹窗后无法播放，求技术排查帮助

嘿，自学编程遇到这种小坑太正常了，别着急，我帮你捋清楚问题出在哪！

你现在的问题核心在于HTML里的ID是唯一标识，你给两个弹窗都用了media-popup这个ID，浏览器和JS只会识别到第一个带这个ID的元素，所以点击第二个链接的时候，其实还是在操作第一个弹窗，自然就乱了。

下面给你两种解决思路，选哪种都可以：

方案1：给每个弹窗设置唯一ID #

把每个弹窗的ID改成不一样的，对应的链接href也同步修改，这样JS就能准确找到对应的弹窗了。

修改后的代码示例：

<a href="#media-popup-1" data-media="//www.youtube.com/embed/XXXXX">click me 1</a>
<div class="popup" id="media-popup-1">
  <iframe src="" frameborder="0" allowfullscreen></iframe>
</div>

<a href="#media-popup-2" data-media="//www.youtube.com/embed/YYYYY">click me 2</a>
<div class="popup" id="media-popup-2">
  <iframe src="" frameborder="0" allowfullscreen></iframe>
</div>

<script type="text/javascript">
$("[data-media]").on("click", function(e) {
  e.preventDefault();
  var $this = $(this);
  var videoUrl = $this.attr("data-media");
  var popup = $this.attr("href");
  var $popupIframe = $(popup).find("iframe");
  $popupIframe.attr("src", videoUrl);
  $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
  e.stopPropagation();
});
</script>

这个方案改动最小，就是给ID加个序号，适合弹窗数量不多的场景。

方案2：用容器关联链接和弹窗（更灵活） #

如果以后要加更多弹窗，总改ID也麻烦，可以把每个链接和对应的弹窗放在同一个容器里，JS通过相对位置找到对应的弹窗，不用依赖ID：

<div class="video-container">
  <a href="javascript:void(0)" data-media="//www.youtube.com/embed/XXXXX">click me 1</a>
  <div class="popup">
    <iframe src="" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<div class="video-container">
  <a href="javascript:void(0)" data-media="//www.youtube.com/embed/YYYYY">click me 2</a>
  <div class="popup">
    <iframe src="" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<script type="text/javascript">
$("[data-media]").on("click", function(e) {
  e.preventDefault();
  var $this = $(this);
  var videoUrl = $this.attr("data-media");
  // 找到当前链接所在容器里的弹窗和iframe
  var $popupIframe = $this.closest(".video-container").find(".popup iframe");
  $popupIframe.attr("src", videoUrl);
  $this.closest(".page").addClass("show-popup");
});

$(".popup").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(".page").removeClass("show-popup");
});

$(".popup > iframe").on("click", function(e) {
  e.stopPropagation();
});
</script>

这个方案的好处是，不管你加多少个弹窗，只要复制video-container这个结构就行，不用改任何JS代码，扩展性更强。

核心原理就是：HTML里的ID必须唯一，不能重复使用，否则DOM查询只会返回第一个匹配的元素，这是新手很容易踩的坑，以后写代码多注意就好啦！

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