jquery - 单击视频外部时，如何使 YouTube 视频停止播放？

Question

当在横幅中单击图像时，我会出现一个 YouTube 视频模式。 YouTube 视频设置为自动播放，但是点击视频外部时如何让 YouTube 视频停止播放？

HTML 代码

<div class="banner-image">
  <div class="banner-image-container">
    <div class="image"><a href="#media-popup" data-media="//www.youtube.com/embed/qfGggAGITwg?rel=0&autoplay=1"><img src="/files/theme/images/hover.png"/></a></div>
    <div class="popup" id="media-popup">
      <div class="video-container">
        <div class='embed-container'>
          <iframe id="player" frameborder='0' allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 代码

.banner-image {
    height:100%;
}

.popup {
    position:absolute;
    z-index:9;
    top:0;
    left:0;
    padding-top:100px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}

jQuery 代码

jQuery(function($) {
$("[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(".banner-image").addClass("show-popup");
});

$(".popup").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".banner-image").removeClass("show-popup");
});

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

});

Answer 1

给您一个解决方案 https://jsfiddle.net/9skjg5Lg/

jQuery(function($) {
  $("[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(".banner-image").addClass("show-popup");
  });

  $(".popup").on("click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      var src = $(this).find('iframe').attr('src').replace('autoplay=1', 'autoplay=0');
      $(this).find('iframe').attr('src', src);
      //$(".banner-image").removeClass("show-popup");
  });

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

});

.banner-image {
    height:100%;
}

.popup {
    position:absolute;
    z-index:9;
    top:0;
    left:0;
    padding-top:100px;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

.show-popup .popup {
    opacity:1;
    visibility: visible;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-image">
  <div class="banner-image-container">
    <div class="image"><a href="#media-popup" data-media="https://www.youtube.com/embed/qfGggAGITwg?rel=0&autoplay=1"><img src="http://via.placeholder.com/350x150"/></a></div>
    <div class="popup" id="media-popup">
      <div class="video-container">
        <div class='embed-container'>
          <iframe id="player" frameborder='0' allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

将 autoplay=1 替换为 autoplay=0 以停止视频。我在 .popup 单击事件中附加了相同的内容。

希望对您有所帮助。