拆分同页面含视频与按钮的iframe，实现按钮单独应用invert(1)滤镜

一、拆分原iframe结构 #

把原iframe里的视频和1-5号按钮拆成两个独立DOM模块：

• 视频模块：直接提取原iframe内的<video>元素，或单独用iframe加载视频源，保证视频正常播放。
• 按钮模块：将1-5号按钮单独放入一个容器（比如<div class="button-group">），保留原有的交互逻辑（如播放、暂停、切换等控制功能）。

二、单独为按钮应用反转滤镜 #

给按钮容器添加专属CSS样式，仅对按钮生效，完全不影响视频：

.button-group {
  filter: invert(1);
}
/* 可选优化：如果按钮有默认背景色，可补充样式避免反转后视觉异常 */
.button-group button {
  /* 按需调整背景、文字色，适配反转后的显示效果 */
}

三、确保组件协同工作 #

• 若原按钮是通过iframe内部JS控制视频，拆分后需将交互逻辑迁移到父页面，让按钮直接操作视频元素：

  // 示例：按钮控制视频基础交互
  document.querySelectorAll('.button-group button').forEach(btn => {
    btn.addEventListener('click', function() {
      const video = document.querySelector('video');
      // 根据按钮标识执行对应操作
      switch(this.id) {
        case 'btn1':
          video.play();
          break;
        case 'btn2':
          video.pause();
          break;
        // 补充其他按钮的控制逻辑
      }
    });
  });
  

• 若视频仍用iframe加载，需通过postMessage实现跨iframe通信，让按钮容器向视频iframe发送控制指令，保障交互正常。

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