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

我遇到了同样的问题。过了一会儿，我从＆＃34; iframe＆＃34;到＆＃34;视频＆＃34;。这是我用过的......

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

注意：确保添加＆＃39;自动播放＆＃39;或者＆＃39;控制＆＃39;否则你将有一个无法播放的视频。

希望这有帮助！

Answer 2

在我的响应容器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);
}

youtube边缘的黑线使用bootstrap嵌入

2 个答案: