如何使用CSS裁剪iframe中播放的视频

要实现页面内嵌入iframe视频的裁剪效果，核心原理是通过父容器作为可视裁剪窗口，隐藏超出窗口范围的内容，再调整内部iframe的偏移位置，把需要保留的画面区域对准窗口即可，不需要修改视频源。

实现逻辑 #

• 外层容器设置固定可视尺寸，添加overflow: hidden属性，所有超出容器边界的内容都会被隐藏，这是实现裁剪的核心
• 内部iframe设为绝对定位，通过top/left偏移属性调整位置，将不需要显示的画面部分移到外层容器的可视区域外
• 可根据实际要裁剪的上下左右区域大小，灵活调整容器尺寸和iframe偏移数值

适配现有代码的CSS样式 #

以下示例以裁剪视频顶部40px台标、底部25px滚动栏，最终显示560px*250px画面为例，你可以根据自己需要裁剪的区域修改对应数值：

/* 视频外层裁剪容器 */
.videos {
  position: relative;
  /* 裁剪后最终展示的画面尺寸 */
  width: 560px;
  height: 250px;
  /* 核心裁剪属性：隐藏超出容器的内容 */
  overflow: hidden;
}

/* 嵌入的视频iframe */
.videos iframe {
  position: absolute;
  /* 向上偏移40px，把顶部需要裁掉的区域移出容器可视范围 */
  top: -40px;
  left: 0;
  /* iframe尺寸保持原视频的完整尺寸，包含被裁剪的部分 */
  width: 560px;
  height: 315px;
  border: 0;
}

调整说明 #

• 如果需要裁剪左侧/右侧区域，只需要修改left属性为对应负值，同时调整iframe宽度适配即可
• 要做响应式适配的话，可以把.videos的宽度设为max-width: 100%，配合aspect-ratio属性固定画面比例，iframe宽高设为100%就能随容器自适应
• 该方案是纯视觉层面的前端裁剪，不会修改视频源文件，用户触发视频全屏时仍会看到完整未裁剪的原始画面

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