如何用CSS在YouTube嵌入视频上方添加左右两侧定位遮罩

核心问题原因 #

新添加的左上角遮罩被视频覆盖，本质是绝对定位元素的层级（z-index）低于视频，且未设置明确的定位父容器，导致位置基准错误。

解决方案步骤 #

1. 给视频的父容器添加position: relative，让遮罩的绝对定位基于容器（而非整个页面），确保位置精准。
2. 给所有遮罩元素添加z-index: 999（或更高数值），将遮罩层级调高到视频上方，才能有效拦截点击。
3. 左上角遮罩使用left: 1px定位，保持top: 2px与右侧遮罩顶部对齐。

完整代码示例 #

<!-- 视频容器：必须设置position: relative -->
<div style="position: relative;">
  <!-- 嵌入的YouTube视频 -->
  <iframe src="你的YouTube视频地址" width="640" height="545" frameborder="0"></iframe>

  <!-- 右侧遮罩 -->
  <div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; right: 1px; top: 2px; background-color: #000; z-index: 999;"></div>

  <!-- 左上角遮罩 -->
  <div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; left: 1px; top: 2px; background-color: #000; z-index: 999;"></div>
</div>

关键细节说明 #

• z-index：只要数值大于视频（iframe）的默认层级即可，999是通用的高层级值，避免被其他页面元素覆盖。
• position: relative：如果缺少这个属性，遮罩会基于整个页面定位，容易和视频位置脱节。
• 尺寸与对齐：保持左上角遮罩的height和top值与右侧遮罩完全一致，确保顶部对齐、高度匹配。

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