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

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;

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

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

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

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

如何为响应式视频添加任意大小的边框，而不出现黑色边框或放大视频？

Answer 1

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