使用 Bootstrap 嵌入 YouTube 边缘的黑线

Question

在 Chrome 上最大化屏幕时，我的响应式 YouTube 嵌入内容上出现烦人的黑线（尝试发布图像但没有代表）。

暂停时，视频底部会出现一条细黑线。播放时，视频左侧有一条稍粗的黑线。

我正在使用 Bootstrap 提供的响应式代码：

<div class="row">
   <div class="col-lg-8">
      <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jO7UfFyGrdk?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
      </div>
   </div>
</div>

这很烦人，因为我希望视频中的纯白色背景与我网站的背景相匹配。

Answer 1

在我的响应式容器 div 中，我添加了 Clip-path: inset(1px 1px); 适用于除 Edge 之外的较新浏览器。我想出的唯一解决方案是从缩略图中删除黑线。

.embed-container iframe, .embed-container object, .embed-container embed
{ 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(1px 1px);
}