JS单按钮切换Elementor内嵌YouTube视频播放暂停仅生效一次问题

你的代码失效是三个低级错误叠加导致的：

• 所有条件判断误用赋值运算符=，而非比较运算符===。if (santanVid = 'pausing')不是判断变量是否等于pausing，而是直接把变量赋值为pausing，判断逻辑从根上就失效了。
• 逻辑完全冗余：你先写了一段状态翻转的判断，紧接着又写了一段执行操作的判断，两段判断都用了赋值操作，等于每次点击都会连续两次强行修改变量值，你自己定义的santanVid状态标记根本没有起到记录状态的作用。
• 无差别触发vid1.click()：每次执行分支都模拟点击Elementor自带的播放按钮，这个按钮本身就自带播放/暂停切换逻辑，和你自己写的控制逻辑互相冲突，两边状态不同步自然点两次就失效。

// 缓存DOM元素，避免每次点击都重复查询
const videoIframe = document.querySelector('.elementor-video');
const triggerBtn = document.getElementById('santan-thumb');
// 用布尔值标记播放状态，比字符串判断更简单不易出错，初始状态为暂停
let isPlaying = false;

triggerBtn.onclick = () => {
  // 直接翻转状态，无需多层if-else判断
  isPlaying = !isPlaying;

  // 直接调用YouTube iframe官方接口发控制指令，不模拟DOM点击避免逻辑冲突
  const command = isPlaying ? 'playVideo' : 'pauseVideo';
  videoIframe.contentWindow.postMessage(
    JSON.stringify({
      event: 'command',
      func: command,
      args: ''
    }),
    '*'
  );

  // 如需同步切换Elementor自带的播放/暂停图标样式，保留以下代码即可
  const iconEl = document.querySelector('.eicon-play, .eicon-pause');
  if (iconEl) {
    iconEl.classList.toggle('eicon-play', !isPlaying);
    iconEl.classList.toggle('eicon-pause', isPlaying);
  }
};

• 写JS条件判断永远记住：比较值用===，单等号=仅在赋值时使用，这是前端新手最常犯的基础错误。
• 控制内嵌YouTube视频优先用官方postMessage接口，比模拟DOM点击稳定得多，不会受Elementor自身逻辑、其他页面脚本的干扰。
• 播放/暂停、开/关这类二元状态直接用布尔值true/false存储，翻转状态直接用!取反即可，不用写多层if-else做字符串匹配，代码更短也更不容易出错。
• 拼接JSON参数优先用JSON.stringify方法，不要手写带转义符的JSON字符串，避免格式错误。

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