YouTube嵌入视频能否设置透明背景？如何解决border radius背景渗出问题

• 方案1：外层容器裁切（最通用，无需修改嵌入逻辑）
  给iframe套一层父容器，通过溢出隐藏直接裁切边角，规避播放器内部黑色背景溢出问题，配套CSS如下：

/* 外层容器样式 */
.yt-video-wrapper {
  aspect-ratio: 16 / 9;
  border-radius: 16px; /* 替换为你需要的圆角数值 */
  overflow: hidden;
  transform: translateZ(0); /* 触发硬件加速，解决webkit内核浏览器圆角裁切失效问题 */
}
/* 内嵌iframe样式 */
.yt-video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

对应的HTML结构示例：

<div class="yt-video-wrapper">
  <iframe src="YouTube无Cookie嵌入地址" title="YouTube视频播放器" allowfullscreen></iframe>
</div>

• 方案2：内阴影遮挡（适配极端场景的补充方案）
  如果外层裁切后仍有细微的边缘渗出，可以给父容器加和页面背景同色的内阴影，直接盖住边缘漏出的黑色背景：

.yt-video-wrapper {
  /* 保留方案1的原有属性，新增以下内容 */
  /* 数值1px可根据圆角大小调整，#fff替换为你的页面背景色 */
  box-shadow: 0 0 0 1px #fff inset;
}

• 注意事项：
  受浏览器同源策略限制，你无法直接修改跨域iframe内部的DOM节点、CSS样式，因此不需要尝试修改YouTube播放器自带的样式文件或手动添加.ytp-transparent类，外层方案已经可以100%解决圆角渗出问题。

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