CSS Grid布局导致iframe无法交互的解决方法求助

核心问题出在.wrapper的z-index: -1上——当父容器设置负z-index时，整个容器（包括内部的iframe）会被压在页面默认堆叠层级的最底层，哪怕单独给iframe加z-index也没用，因为子元素的堆叠层级无法突破父容器的限制，最终导致iframe被页面其他元素（甚至是body的默认层级）覆盖，自然没法点击交互。

解决方案 #

1. 移除wrapper的负z-index
   直接删掉.wrapper里的z-index: -1，这是最直接有效的办法。如果需要让wrapper处于某些元素下方，应该调整那些元素的z-index，而不是给wrapper设置负层级。

2. 若必须保留wrapper底层定位
   如果确实需要wrapper在页面底层，但要让iframe可交互，需要先去掉wrapper的z-index: -1，再给iframe设置相对定位和高z-index：

   .video {
     position: relative;
     z-index: 999; /* 数值足够高即可 */
   }
   

修改后的完整CSS示例 #

.wrapper {
  position: fixed;
  top: 25%;
  left: 25%;
  margin-top: -5%;
  margin-left: -20%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 30% 40% 30%;
  grid-template-areas: 'pic header header' 'pic video video' '. video video';
}

/* 可选：确保iframe在容器内层级优先 */
.video {
  position: relative;
  z-index: 1;
}

额外检查点 #

• 用浏览器开发者工具的元素选择器，查看是否有其他固定/绝对定位元素覆盖在iframe上方；
• 确认iframe的allow属性设置正确（你的代码里已经包含了必要的交互权限，这部分没问题）。

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