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

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%;
}