为何添加外层div后我的Youtube iframe视频无法点击？

我帮你找到了问题的核心原因，咱们一步步来修复：

问题根源分析 #

1. pointer-events: none;的误用：你给#videoResizer和#videoContainer都添加了这个属性，它会让元素及其所有子元素（包括你的iframe）完全无法接收任何鼠标交互事件，这就是视频点不了的直接原因。
2. z-index: -1;的干扰：#botNavBar的z-index设为-1，会让整个底部栏区域跑到页面其他元素的下层，不仅可能导致交互失效，还可能被其他内容遮挡。

修复方案 #

只需要调整两处CSS设置，同时保留你要的视频居中效果：

修改后的CSS代码

#botNavBar { 
  height: auto; 
  padding-top: 50px; 
  padding-bottom: 100px; 
  padding-left: 150px; 
  padding-right: 150px; 
  position: relative; 
  background: black; 
  display: flex; 
  flex-direction: column; 
  z-index: 1; /* 从-1改为正数，避免被其他元素覆盖 */
  align-items: center; 
}
#videoResizer { 
  width: 60%; 
  z-index: 2; 
  /* 移除pointer-events: none; */
}
#videoContainer { 
  width: 100%; 
  position: relative; 
  padding-bottom: 56.25%; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  z-index: 2; 
  /* 移除pointer-events: none; */
}
#trailerTwogether { 
  position: absolute; 
  display: block; 
  width: 100%; 
  height: 100%; 
  border-style: none; 
  z-index: 200000000000000; 
}
#leftSide { 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  align-items: flex-start; 
}
#contactInfo { 
  Font-Family: 'Raleway', Sans-Serif; 
  Font-Size: 16px; 
  color: rgb(214, 234, 248); 
  margin-bottom: 0px; 
  padding-top: 50px; 
}
#contactMail { 
  Font-Family: 'Raleway', Sans-Serif; 
  Font-Size: 16px; 
  color: darkmagenta; 
  margin-bottom: 0px; 
  padding-top: 0px; 
  margin-top: 0px; 
}

保留原HTML结构不变

<div id="botNavBar">
  <div id="videoResizer">
    <div id="videoContainer">
      <iframe id="trailerTwogether" src="https://www.youtube.com/embed/7VjyXe_d57E">
      </iframe>
    </div>
  </div>
  <div id="leftSide">
    <p id=contactInfo> Desarrollado por <b>Flaming Llama Games</b> para <b>PS4</b> <br> Lanzamiento: finales <b>2021</b> </p>
    <p id="contactMail"> contacto@flamingllamagames.com </p>
  </div>
</div>

效果说明 #

• 移除pointer-events: none;后，iframe就能正常接收点击、播放等交互事件了。
• 调整#botNavBar的z-index为正数，确保整个底部栏区域处于正常层级，不会被其他元素遮挡。
• 原有的align-items: center;和width:60%设置依然能保证视频在容器中居中显示，完全满足你的需求。

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