如何获取 youtube 播放器 ID 并停止视频答案

【问题标题】：how to get youtube player id and stop video如何获取 youtube 播放器 ID 并停止视频
【发布时间】：2018-04-06 02:04:37
【问题描述】：

this answer 用于获取播放器 ID，this answer 用于根据播放器 ID 停止视频，我在 Wordpress 网站上尝试了以下 jQuery 来获取 youtube 播放器 ID 并停止视频：

var videoID = player.getVideoData()['video_id'];
$(videoID).get(0).stopVideo();

但是，它不适合我。

帮助表示赞赏。

编辑：this page 有两个视频，通过点击最新演示文稿右下角的播放按钮开始播放。当视频关闭时，包含的 div 简单地用 CSS 隐藏，视频在后台继续播放。

编辑2：

根据 zer00ne 的回答，我已将 JavaScript 修改为：

 jQuery(document).ready(function() {
    jQuery('#toggle1').click(function(){
        jQuery('#video1').appendTo('body');
        jQuery('#video1').addClass('active');
        jQuery('#video2').removeClass('active');
        });
    jQuery('#toggle2').click(function(){
        jQuery('#video2').appendTo('body');
        jQuery('#video2').addClass('active');
        jQuery('#video1').removeClass('active');
    });
    jQuery('#close1').click(function(){
        jQuery('#video1').removeClass('active');
        var YT1 = $(this).next('iframe');
        YT1[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');
    });
    jQuery('#close2').click(function(){
        jQuery('#video2').removeClass('active');
        var YT2 = $(this).next('iframe');
        YT2[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');                    
    });                
});

但是，当我点击视频右上角的 X 时，这并没有停止视频。

【问题讨论】：

WordPress 帖子编辑器可以自动embed a YouTube video。只需将 YT 网址复制/剪切并粘贴到帖子中即可。
Wordpress 帖子编辑器没有做我需要做的事情。
请参阅 youtube iframe api 以了解可能的解决方案，developers.google.com/youtube/iframe_api_reference。在全局范围内初始化 youtube 播放器对象后，您可以调用 player.stopVideo();停止播放视频。确保通过将此参数传递给嵌入视频来启用 enablejsapi=1。
@Steve 我尝试了两个视频，并且灯箱叠加层阻止了对关闭按钮的访问。我正在使用 Win10 Chrome，找不到关闭灯箱的方法，我不得不刷新页面。这是您应该解决的更大问题。当你解决这个问题后，我可以帮助解决你的问题。
立即尝试@zer00ne。干杯。

标签： jquery video

【解决方案1】：

在下面的 Demo 中，包含了 OP 站点的 <iframe>s 及其 2 级祖先及其兄弟。添加了一个 ON / OFF 按钮用于演示目的。

jQuery 被用作一种方便的方式来遍历 DOM。纯 JavaScript 用于访问<iframe>，并使用PostMessage API 发送stopVideo command。

演示 - 对于一个正常运行的演示，请查看 Plunk

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      background: #000;
      position: relative;
    }
    
    .mfp-container {
      opacity: 0;
      transition: 1s;
    }
    
    .mfp-content {
      position: relative;
      background: #000;
      width: 640px
    }
    
    .mfp-content p {
      position: absolute;
      right: 0;
    }
    
    .active {
      opacity: 1;
      transition: 1s;
    }
    
    #toggle {
      width: 10ch;
      height: 4ex;
      position: absolute;
      right: calc(50% - 5ch);
      top: calc(50% - 2ex);
      z-index: 1;
      outline: 15px solid rgba(255, 0, 0, 0.7);
      color: tomato;
    }
  </style>
</head>

<body>

  <div class="mfp-container" id="video1">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close1">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/q_dv3PoUAM0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <button id='toggle' type='button'>ON / OFF</button>
  <div class="mfp-container active" id="video2">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close2">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/8GpbJGZ7LEs?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $('#toggle').on('click', function() {
      $('.mfp-container').toggleClass('active');
    })
    $('.mfp-content p').on('click', function() {
      var MFP = $(this).closest('.mfp-container');
      var YT = $(this).next('iframe');
      MFP.removeClass('active');
      YT[0].contentWindow.postMessage(`{
    	"event":"command",
    	"func":"${'stopVideo'}",
    	"args":""
    }`, '*');
    });
  </script>
</body>

</html>

【讨论】：

我已尝试将您的解决方案融入我的代码 - 请参阅我的问题的编辑。
嗨 zer00ne。是否可以使用类似的代码在视频打开时自动播放？
嗨@Steve，当灯箱打开时，代码肯定可以播放。事实上，有一种方法可以使用没有 JavaScript 的链接来做到这一点。
您是否尝试将代码添加到您的网站而不进行任何更改？所有类和属性都与您的布局相匹配。 #toggle 按钮是个例外，但那是出于演示目的。
您的切换嵌套在<p> 中。所以var YT2 = $(this).next('iframe'); 现在坏了。