使用 Bootstrap 嵌入youtube边缘的黑线

mdfafbf1 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(171)

在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>

这是恼人的，因为我想在我的视频纯白色的背景，以配合我的网站的背景。

twitter-bootstrap

来源：https://stackoverflow.com/questions/32944681/black-lines-on-edge-of-youtube-embed-using-bootstrap

3条答案

按热度按时间

j2qf4p5b1#

在我的响应容器div中，我添加了clip-path：插图（1像素x 1像素）;适用于较新的浏览器，除了边缘。唯一的解决方案，我想出了删除黑线从缩略图。

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

赞(0）回复(0）举报 2022-12-07

jei2mxaa2#

我遇到了同样的问题。过了一会儿，我从“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>

注：请确保添加“自动播放”或“控制”，否则您将有一个无法播放的视频。
希望这对你有帮助！

赞(0）回复(0）举报 2022-12-07

8hhllhi23#

我解决了这个问题：