为响应式嵌入视频添加边框

Question

我正在尝试为响应式嵌入视频添加边框。

我尝试了两种不同的方法来展示视频：

1

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe>
</div>

2

<div style="position: relative; width: 100%; padding-bottom: 56.25%;" class="text-center">
    <iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%"></iframe>
</div>

我尝试使用以下方法为这两种方法添加边框：

一个。

border:3px solid #EEE;

湾（下面的变化，例如不同的宽度/高度值等，以及父div获得背景颜色，即边框颜色）

<iframe style="left: 5px; top: 5px; width: 100%; height: 100% ... >...</iframe>

对于所有方法，在添加边框时存在一个一致的问题：视频要么包含大小，要么太小。视频类型放大或者太小，以至于根据宽度或高度是否太小，有垂直或水平出现的黑色边框。见下图。

我试图添加神奇的值来摆脱黑色边框，比如增加外部div的高度填充一点，通过将左/右设置为某个值来移动iframe并将其大小减小一些值（所有设置值以保持视频的宽高比）。我会在最坏的情况下使用它。我问的原因是因为我希望有更顺畅的方法来做到这一点。

如何在没有出现黑色边框或视频被放大的情况下为响应式视频添加任意大小的边框？

Answer 1

如果您有权直接修改网站的HTML和CSS，则可以尝试在<div>周围添加.embed-responsive，然后为其添加边框。作为一般规则，如果可以的话，最好将HTML和CSS分开。

快速演示：https://codepen.io/mikejandreau/pen/jxNJmK

像这样添加包装<div>：

<div class="embed-border"><!-- add this guy -->
  <div class="embed-responsive">
    <iframe src="your-video"></iframe>
  </div>
</div><!-- close .embed-border -->

添加CSS：

/* extra div which gets the border */
.embed-border {
  border: 5px solid red;
  box-sizing: border-box; /* prevents extra width from being added */
}

/* aspect ratio and positioning for responsive video */
.embed-responsive {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}

.embed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}