添加多个视频时，iframe视频无法播放

Question

在我的代码中发现错误有点麻烦。任何帮助将非常感激。我有点自学，所以请放轻松我！

当我只插入一个iframe时，iframe会起作用：

这似乎有效：

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

<script types="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>

但这不是:( -

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

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