Javascript iframe视频通过按钮打开，关闭后停止播放

我试图制作一个按钮，显示隐藏的iframe视频。没问题，它能用

但当我关闭屏幕时，视频仍在播放。此外，如何添加关闭按钮来关闭iframe。我想关闭iframe，同时停止视频。有没有其他方法可以这样做

$（“#视频链接”）。放大弹出窗口({
键入：“内联”，
点击中键：正确
})

.mfp隐藏{
显示：无！重要；
}
.按钮{
填充：20px 40px；
边框颜色：#F3；
字号：17px；
字体大小：1.7rem；
字体系列：“museo sans”，Arial，Verdana；
字号：500；
边缘顶端：40px；
显示：内联块；
}
.按钮{
保证金：50px自动；
文本对齐：居中；
宽度：200px；
显示：块；
边框：2件纯黑；
颜色：黑色；
文本转换：大写；
过渡：所有0.15秒缓进缓出；
}
.button.fa{
左边距：20px；
}
.按钮：悬停{
背景色：rgba（0,0,0,0.7）；
颜色：白色；
}
.内容a{
文字装饰：无；
}
h1{
颜色：黑色；
字体大小：50px；
字体系列：“museo sans”，Arial，Verdana；
文本转换：大写；
线高：72px；
字母间距：-5px；
利润率：185px0；
}
跨度{
字体大小：23px；
字体大小：2.3rem；
显示：块；
字体系列：“museo sans”，Arial，Verdana；
字号：500；
字母间距：0px；
线高：25px；
}
* {
保证金：0；
填充：0；
边界：0；
大纲：无；
}
.内容{
文本对齐：居中；
}

---

您在元素中放置了相同的ID。 您可以这样做：

HTML代码

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="content">
            <a href="#videoStory" class="button more videoLink1">ビデオ A<i class="fa fa-play-circle" aria-hidden="true">&nbsp;</i></a>
            <div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;">
                <iframe width="853" height="480" src="" local-src="video1.mp4" frameborder="0" allowfullscreen></iframe>
            </div>

            <a href="#videoStory2" class="button more videoLink2" >ビデオ B<i class="fa fa-play-circle" aria-hidden="true">&nbsp;</i></a>
            <div id="videoStory2" class="mfp-hide" style="max-width: 75%; margin: 0 auto;">
                <iframe width="853" height="480" src="" local-src="video2.mp4" frameborder="0" allowfullscreen></iframe>
            </div>

            <a href="#videoStory3" class="button more videoLink3" >ビデオ C<i class="fa fa-play-circle" aria-hidden="true">&nbsp;</i></a>
            <div id="videoStory3" class="mfp-hide" style="max-width: 75%; margin: 0 auto;">
                <iframe width="853" height="480" src="" local-src="video3.mp4" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>

---

你好你的视频是本地的吗？或者你要用youtube视频？本地的，不是youtube视频@Marcusvinnicius首先，您有3个

a

标签，具有相同的

id

和3个

div

标签，具有相同的

id

。感谢您的回答，但这是否可以为iFrame添加关闭按钮？使用那个按钮也可以停止视频？@Barbie，我编辑了答案代码。iframe上的标记src在打开之前应为空。当关闭模式时，我移除iframe并在同一本地模式中重新创建。我不知道这是否是最好的解决方案，但工作的！

    var element = "";
    var iframeSrc = "";

    $('.videoLink1, .videoLink2, .videoLink3')
    .magnificPopup({
          type:'inline',
          midClick: true,
        callbacks: {
            open: function() {
              element = "#" + $(this)[0].items[1].inlineElement[0].id;
            iframeSrc = $(element).find("iframe").eq(0).clone();
            $(element).find("iframe").eq(0).attr('src', $(element).find("iframe").eq(0).attr('local-src'));

          },
        close: function() {

            $(element).find("iframe").remove();
            $(element).append(iframeSrc);


          }
        }
      });