Google Chrome嵌入YouTube/Vimeo视频时overflow:hidden失效问题求助

我之前在Chrome更新后也碰到过一模一样的问题！旧版本里用父容器overflow:hidden配合iframe的transform居中裁剪完全正常，新版本突然就失效了，折腾了好一阵才找到原因。

问题根源 #

Chrome在较新版本（比如110+）中对堆叠上下文和overflow:hidden的匹配逻辑做了调整：当你给iframe设置z-index: -1时，它会脱离父容器.container的堆叠上下文，导致父容器的overflow:hidden无法对它生效——相当于iframe跑到了父容器的“外面”，自然不会被裁剪。另外YouTube的embed iframe本身自带一些内部样式，也可能和你的自定义样式冲突。

修复方案 #

这里有几个经过验证的可行方案，你可以根据需求选择：

方案1：调整iframe的z-index

把iframe的z-index从-1改成0或者更高（只要不超过父容器内其他元素的层级就行），让它回到父容器的堆叠上下文里：

.container {
  width: 400px;
  height: 266px;
  overflow: hidden;
  position: relative;
  border: 2px solid red;
  margin-bottom: 30px;
}

iframe {
  position: absolute;
  width: 480px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; /* 关键修改：去掉-1 */
  overflow: hidden;
  border: none; /* 可选：去掉iframe默认边框 */
}

方案2：用clip-path替代overflow:hidden

如果方案1还是不行，可以给父容器加上clip-path属性，它的裁剪逻辑不受堆叠上下文影响，兼容性也很好：

.container {
  width: 400px;
  height: 266px;
  overflow: hidden; /* 保留以防旧浏览器 */
  position: relative;
  border: 2px solid red;
  margin-bottom: 30px;
  clip-path: inset(0 0 0 0); /* 裁剪出和容器一样的区域 */
}

方案3：不用transform，直接计算偏移量

如果你担心transform的兼容性问题，可以用calc直接计算top和left的值，这样就避开了堆叠上下文的问题：

iframe {
  position: absolute;
  width: 480px;
  height: 350px;
  top: calc(50% - 175px); /* 350px/2=175px */
  left: calc(50% - 240px); /* 480px/2=240px */
  z-index: 0;
  overflow: hidden;
}

额外提示 #

如果你的iframe需要交互（比如点击播放），别加pointer-events: none；如果不需要交互，加上这个可以防止iframe的元素穿透到上层影响操作。

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