css - Youtube：嵌入式视频压缩

Question

我正在通过 iFrame API 嵌入一个 youtube 视频。视频本身是方形的，它的宽度和高度取决于容器的大小（也是方形，具有可变尺寸）——我正在使用 CSS 来实现这一点。

一切或多或少都可以，但是在视频的开头和结尾（开始之前和停止之后），内容以减小的宽度显示，露出黑色边条：

知道为什么会发生这种情况或该怎么做吗？有人在响应式布局的背景下制作了形状不规则的视频吗？

---

更新

似乎将宽度和高度设置为 101% 会有所帮助。不过，还不确定如何始终如一。

Answer 1

 <div class="video_iframe_wr">
    <iframe/>
 </div>


  .video_iframe_wr {
  height: 0;
  padding-bottom: 100%; /* that makes height = width */
  position: relative;
}

.video_iframe_wr > iframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
}