Html youtube边缘的黑线使用引导嵌入

在Chrome上的Maximized屏幕上，我在响应迅速的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>

---

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

我遇到了同样的问题。过了一会儿，我从“iframe”切换到“video”。这是我用过的

<div class="embed-responsive embed-responsive-16by9">
    <video class="embed-responsive-item" src="videos/k9pennExample.mp4" type="video/mp4" allowfullscreen controls></video>
</div>

注意：确保添加“自动播放”或“控件”，否则您将有无法播放的视频

---

希望这有帮助

在我的响应容器div中，我添加了剪辑路径：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);
}