javascript - iframe 视频使用按钮打开并在关闭时停止播放

Question

我正在尝试制作一个显示隐藏的 iframe 视频的按钮。没问题，它有效。

但是当我关闭屏幕时，视频仍在播放。此外，如何添加关闭按钮来关闭 iframe。我想关闭 iframe 并同时停止视频。反正有这样做吗？

$('#videoLink').magnificPopup({
  type: 'inline',
  midClick: true
})

.mfp-hide {
  display: none!important;
}

.button {
  padding: 20px 40px;
  border-color: #f3f3f3;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: "museo-sans", Arial, Verdana;
  font-weight: 500;
  margin-top: 40px;
  display: inline-block;
}

.button {
  margin: 50px auto;
  text-align: center;
  width: 200px;
  display: block;
  border: 2px solid black;
  color: black;
  text-transform: uppercase;
  transition: all 0.15s ease-in-out;
}

.button .fa {
  margin-left: 20px;
}

.button:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.content a {
  text-decoration: none;
}

h1 {
  color: black;
  font-size: 50px;
  font-family: "museo-sans", Arial, Verdana;
  text-transform: uppercase;
  line-height: 72px;
  letter-spacing: -5px;
  margin: 185px 0 0 0;
}

span {
  font-size: 23px;
  font-size: 2.3rem;
  display: block;
  font-family: "museo-sans", Arial, Verdana;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 25px;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

.content {
  text-align: center;
}

<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" id="videoLink">ビデオ 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="video1.mp4" frameborder="0" allowfullscreen></iframe>
  </div>

  <a href="#videoStory" class="button more" id="videoLink">ビデオ B<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="video2.mp4" frameborder="0" allowfullscreen></iframe>
  </div>

  <a href="#videoStory" class="button more" id="videoLink">ビデオ C<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="video3.mp4" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

Answer 1

您将相同的 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>

JS 代码:

    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);


          }
        }
      });