获取YouTube播放器ID并停止视频失败求助（WordPress环境）

看起来你之前的代码存在两个核心问题，我来帮你拆解并给出可行方案：

原代码的错误点 #

1. 选择器错误：player.getVideoData()['video_id']获取到的是YouTube视频本身的内容ID（比如dQw4w9WgXcQ），而不是页面中播放器DOM元素的ID，所以$(videoID)根本找不到对应的播放器元素。
2. 方法调用错误：stopVideo()是YouTube IFrame API提供的方法，只能通过API初始化的播放器实例调用，不能直接在DOM元素上执行。

方案一：基于YouTube IFrame API控制（推荐，功能更完整） #

如果你的视频是通过YouTube官方的IFrame API嵌入的，首先需要确保正确初始化播放器实例，再调用停止方法：

1. 初始化播放器并保存实例 #

在你的主题或自定义脚本中添加以下代码（注意要先加载YouTube API）：

// 全局数组保存所有播放器实例
let youtubePlayers = [];

// API加载完成后自动执行的初始化函数
function onYouTubeIframeAPIReady() {
  // 找到页面中所有YouTube嵌入iframe
  document.querySelectorAll('iframe[src*="youtube.com/embed"]').forEach((iframe, index) => {
    // 给无ID的iframe自动生成ID（如果需要）
    if (!iframe.id) iframe.id = `youtube-player-${index}`;
    // 初始化播放器并保存到数组
    youtubePlayers[index] = new YT.Player(iframe.id, {
      events: {
        'onReady': function() {
          console.log(`播放器 ${iframe.id} 已就绪`);
        }
      }
    });
  });
}

// 动态加载YouTube IFrame API
(function() {
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})();

2. 停止指定视频或所有视频 #

// 停止所有YouTube视频
function stopAllYouTubeVideos() {
  youtubePlayers.forEach(player => {
    if (player && typeof player.stopVideo === 'function') {
      player.stopVideo();
    }
  });
}

// 根据视频ID停止对应视频
function stopVideoByVideoId(targetVideoId) {
  youtubePlayers.forEach(player => {
    if (player && player.getVideoData().video_id === targetVideoId) {
      player.stopVideo();
    }
  });
}

// 调用示例：停止视频ID为"abc123"的视频
stopVideoByVideoId("abc123");

方案二：通过postMessage控制（无需API初始化，适合普通iframe嵌入） #

如果你的视频是直接用iframe嵌入（比如WordPress视频块、第三方插件生成的），可以通过postMessage向iframe发送命令来停止视频：

jQuery(document).ready(function($) {
  // 绑定关闭按钮的点击事件（替换成你的关闭元素选择器）
  $('.your-close-button-class').click(function() {
    // 找到所有YouTube iframe并发送停止命令
    $('iframe[src*="youtube.com/embed"]').each(function() {
      this.contentWindow.postMessage(
        '{"event":"command","func":"stopVideo","args":""}',
        '*'
      );
    });
  });

  // 或者根据视频ID停止指定视频
  function stopSpecificVideo(targetVideoId) {
    const targetIframe = $(`iframe[src*="${targetVideoId}"]`);
    if (targetIframe.length) {
      targetIframe[0].contentWindow.postMessage(
        '{"event":"command","func":"stopVideo","args":""}',
        '*'
      );
    }
  }
});

注意事项 #

• 在WordPress中使用jQuery时，记得用jQuery(document).ready()包裹代码，避免DOM未加载完成就执行。
• 如果你的主题启用了jQuery的noConflict模式，不要直接用$，改用jQuery或者在ready函数中传入$作为参数（如上例）。

内容的提问来源于stack exchange，提问作者Steve